/* CSS files add styling rules to your content */

.pip-expanded,
.pip-small {
  border: 1px solid rgba(255,255,255,0.1);
  box-sizing: border-box;
}

.pip-expanded {
  translate: -33%;
  transition: opacity 250ms, scale 200ms, translate 190ms;
  transition-timing-function: cubic-bezier(.07,.95,0,1);
  justify-content: center;
  pointer-events: none;
}

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

.pip-wrapper[position="right"] > .pip-expanded {
  translate: calc(-100% + 48px);
  transform-origin: right;
}

.pip-wrapper:hover:not([small-video]) > .pip-small + .pip-expanded,
.pip-wrapper:hover:not([small-video]) > .pip-expanded {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
}

.pip-wrapper[position="left"]:hover:not([small-video]) > .pip-expanded {
  translate: 0;
}

.pip-wrapper[position="right"]:hover:not([small-video])  > .pip-small + .pip-expanded,
.pip-wrapper[position="right"]:hover:not([small-video]) > .pip-expanded {
  translate: calc(-100% + var(--pip-icon-width-with-margins));
}

.pip-wrapper:hover:not([small-video]) > .pip-small {
  opacity: 0;
  transition: opacity 200ms;
}

.pip-wrapper:is([small-video]) > .pip-expanded,
.pip-explainer,
.pip-icon-label > .pip-icon {
  display: none;
}


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

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

.pip-expanded,
.pip-small {
  border: 1px solid rgba(255,255,255,0.1);
  box-sizing: border-box;
}

.pip-expanded {
  translate: -33%;
  transition: opacity 250ms, scale 200ms, translate 190ms;
  transition-timing-function: cubic-bezier(.07,.95,0,1);
  justify-content: center;
  pointer-events: none;
}

.pip-wrapper[position="right"] > .pip-expanded {
  translate: calc(-100% + 48px);
  transform-origin: right;
}

.pip-wrapper > .pip-small:hover + .pip-expanded,
.pip-wrapper > .pip-expanded:hover {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
}

.pip-wrapper[position="left"]:hover > .pip-expanded {
  translate: 0;
}

.pip-wrapper[position="right"]  > .pip-small:hover + .pip-expanded,
.pip-wrapper[position="right"] > .pip-expanded:hover {
  translate: calc(-100% + 52px);
}

.pip-wrapper:hover > .pip-small {
  opacity: 0;
  transition: opacity 200ms;
}

.pip-explainer-header,
.pip-explainer,
.pip-icon-label > .pip-icon {
  display: none;
}
*/