.TimedContentPlayerNote {
  @apply relative max-w-[350px];
}

/* Preview with thumbnail */
.TimedContentPlayerNote-thumbnail-link {
  @apply relative inline-block overflow-hidden rounded-lg border border-solid border-gray-300 before:btu-icon before:btu-icon-play before:absolute before:left-1/2 before:top-1/2 before:rounded-full before:border before:border-gray-300 before:bg-white before:p-3 before:text-gray-700 before:[transform:translate(-50%,-50%)];
}

/* Preview with no thumbnail */
.TimedContentPlayerNote-thumbnail-noimage {
  @apply blokk h-[250px] w-[350px] bg-black;
}

/* Player (hidden until user clicks on preview) */
.TimedContentPlayerNote-player,
.TimedContentPlayerNote-player-control {
  @apply hidden;
}

.inputContainer-TimedContentPlayerNote-player-visible
  .TimedContentPlayerNote-player-control {
  @apply [display:inherit];
}

.TimedContentPlayerNote-player-frame {
  @apply flex h-[250px] w-[350px] max-w-full items-center justify-center overflow-hidden rounded-lg border border-gray-300 bg-gray-50;
}

.TimedContentPlayerNote-player-frame .frame {
  @apply flex-grow;
}

.TimedContentPlayerNote-player-close {
  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-xs absolute -top-[34px] right-0 cursor-pointer before:btu-icon before:btu-icon-x;
}

.CIG-note:has(.TimedContentPlayerNote) {
  @apply pointer-events-auto order-[0] w-full;
}

/* IframeToolPlayerServlet */
.TimedContentIframeToolPlayer iframe {
  @apply size-full;
}

/* Companion Content */
.ContentEdit-left:has(.TimedContent-companions) {
  @apply @container/content-left;
}

.TimedContent-companions:has(.CIG-note .TimedContentPlayerNote) {
  @apply blokk gap-x-10 [grid-template-areas:"label_label"_"companions_note"] [grid-template-columns:1fr_auto] @content-left-md/content-left:grid;

  &.TC-unselected {
    @apply hidden;
  }

  > .CIG-label {
    @apply [grid-area:label];
  }

  > .CIG-note {
    @apply mb-12 [grid-area:note] @content-left-md/content-left:mb-0;
  }

  > .CIG-large {
    @apply [grid-area:companions];
  }
}

.TimedCompanionSelector-controls {
  @apply gap-2;
}
