body {
  font: caption;
}

[hidden="true"] {
  display: none;
}

#video {
  position: relative;
  border: 1px solid black;
}

#video[size="large"] {
  width: 720px;
  height: 420px;
}

#video[size="medium"] {
  width: 360px;
  height: 210px;
}

#video[size="small"] {
  width: 160px;
  height: 94px;
}

#video[size="tiny"] {
  width: 140px;
  height: 82px;
}

.pip-wrapper {
  position: absolute;
  cursor: pointer;
  -moz-appearance: none;
  background: none;
  border: none;
  text-align: unset;
  top: calc(75% - 40px);
  opacity: 0;
  transition: opacity 200ms;
  --pip-icon-size: 24px;
  --pip-toggle-margin: 8px;
  --pip-icon-width-with-margins: calc(2 * var(--pip-toggle-margin) + var(--pip-icon-size));
}

.pip-wrapper[policy="hidden"] {
  display: none;
}

.pip-label {
  font-size: 16px;
  line-height: 1.2;
}

.pip-expanded {
  font-size: 14px;
}

.pip-wrapper[medium-video] > .pip-expanded > .pip-icon-label > .pip-label {
  font-size: 13px;
}

.pip-wrapper[medium-video] > .pip-expanded {
  font-size: 11px;
}

.pip-wrapper[tiny-video] {
  display: none;
}

#video:hover > .pip-wrapper {
  opacity: 0.8;
}

#video:hover > .pip-wrapper:hover {
  opacity: 1;
}

.pip-wrapper[position="right"] {
  right: 40px;
}

.pip-wrapper[position="left"] {
  left: 12px;
}

.pip-expanded,
.pip-small,
.pip-icon,
.pip-explainer {
  position: absolute;
  left: 0;
  top: 0;
}

.pip-icon {
  top: 8px;
  left: 8px;
  pointer-events: none;
  background-image: url("pictureinpicture.svg");
  background-size: var(--pip-icon-size) var(--pip-icon-size);
  -moz-context-properties: fill;
  fill: #fff;
  height: var(--pip-icon-size);
  width: var(--pip-icon-size);
  background-repeat: no-repeat;
  background-position: center, center;
}

.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-label {
  margin-left: var(--pip-icon-width-with-margins);
  margin-right: var(--pip-toggle-margin);
}

.pip-expanded,
.pip-explainer {
  user-select: none;
}

.pip-small {
  background-color: rgba(12,12,13,0.65);
  box-shadow: 0px 4px 4px rgba(12,12,13,0.25);
  width: 40px;
  height: 40px;
  border-radius: 25px;
}

.pip-expanded {
  display: flex;
  height: 40px;
  background-color: rgba(12,12,13,0.9);
  box-shadow: 0px 4px 4px rgba(12,12,13,0.25);
  width: max-content;
  border-radius: 8px;
  opacity: 0;
  color: #fff;
  align-items: center;
  scale: 0.33 1;
}



/*
.pip-wrapper {
  position: relative;
  cursor: pointer;
  top: 160px;
  -moz-appearance: none;
  background: none;
  border: 0;
  text-align: unset;
}

.pip-wrapper[position="left"] {
  left: 15px;
}

.pip-wrapper[position="right"] {
  left: 430px;
}

.pip-expanded,
.pip-small,
.pip-icon,
.pip-explainer {
  position: absolute;
  left: 0;
  top: 0;
}

.pip-icon {
  top: 8px;
  left: 8px;
  pointer-events: none;
  background-image: url("pictureinpicture.svg");
  background-size: 24px 24px;
  height: 24px;
  width: 24px;
  background-repeat: no-repeat;
  background-position: center, center;
}

.pip-wrapper[position="left"] > .pip-expanded {
  padding-left: 45px;
  padding-right: 16px;
}

.pip-wrapper[position="right"] > .pip-expanded {
  padding-left: 16px;
  padding-right: 50px;
}

.pip-expanded,
.pip-explainer-header,
.pip-explainer {
  user-select: none;
}

.pip-small {
  background-color: rgba(12,12,13,0.6);
  box-shadow: 0px 4px 4px rgba(12,12,13,0.25);
  width: 40px;
  height: 40px;
  border-radius: 25px;
}

.pip-expanded {
  display: flex;
  height: 40px;
  background-color: rgba(12,12,13,0.8);
  box-shadow: 0px 4px 4px rgba(12,12,13,0.25);
  width: max-content;
  border-radius: 8px;
  opacity: 0;
  color: #fff;
  align-items: center;
  scale: 0.33 1;
}*/