/*
 * Styles the Tutorial CPT Video.js player scaffold rendered by TutorialProductBlocks.
 * The video frame and control strip are separated so controls can live inside a go-card surface.
 */

.go-tutorial-video-player {
  --go-tutorial-video-controls-color: var(--wp--preset--color--contrast);
  position: relative;
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  margin-bottom: clamp(3.5rem, calc(2rem + 5vw), 6rem);
  transition: padding 0.5s ease-out;
  @media (max-width: 600px) {
    padding: var(--wp--preset--spacing--30) 0;
  }

  &.initialising > .video-js {
    display: block;
    visibility: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  > .go-tutorial-video-badge {
    position: absolute;
    top: calc(var(--wp--preset--spacing--30) + 0.5rem);
    right: calc(var(--wp--preset--spacing--50) + 0.5rem);
    z-index: 2;
    display: inline-flex;
    gap: 0.6em;
    align-items: center;
    padding: 0.6em 0.8em;
    /* font-family: var(--wp--preset--font-family--open-sans); */
    font-size: 0.6em;
    font-weight: 300;
    color: var(--wp--preset--color--white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    pointer-events: none;
    /* background-color: var(--wp--custom--swatches--gold--300); */
    background-color: color-mix(
      in srgb,
      var(--wp--custom--swatches--gold--300) 90%,
      transparent
    );
    border-radius: 3px;
    opacity: 0.85;
    transition: 0.5s ease-out;

    &::before {
      display: block;
      width: 1.5em;
      height: 1.5em;
      margin-top: -0.1em;
      content: "";
      background-color: currentColor;
      mask-image: var(--wp--custom--icons--padlock-closed);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }
  }

  .video-js:not(.vjs-fullscreen):not(.vjs-full-window) {
    .vjs-big-play-button {
      border: none;
    }
    /* Undo native hover adjustment of button, because detached control bar will also trigger this */
    &:hover {
      .vjs-big-play-button,
      .vjs-big-play-button:focus {
        background-color: rgba(90, 90, 90, 0.5);
        border-color: inherit;
      }
    }
    /* Instead, apply the styles when any sibling element is hovered */
    > :not(.vjs-control-bar):hover {
      ~ .vjs-big-play-button,
      ~ .vjs-big-play-button:focus {
        background-color: rgba(90, 90, 90, 0.5);
        transition: background-color 0.3s ease-in-out;
      }
    }

    &:not(.vjs-live) .vjs-current-time,
    &:not(.vjs-live) .vjs-time-divider,
    &:not(.vjs-live) .vjs-duration {
      display: block;
    }

    video,
    .vjs-poster {
      overflow: clip;
      border-radius: var(--wp--preset--border-radius--small);
    }
    .vjs-control-bar {
      position: relative;
      display: flex;
      visibility: visible !important;
      height: 5em;
      padding: 1em;
      margin-top: var(--wp--preset--spacing--30);
      color: var(--go-tutorial-video-controls-color);
      pointer-events: auto !important;
      background-color: var(--wp--preset--color--card-bg);
      background-image: var(--wp--custom--backgrounds--card--current);
      border-radius: var(--wp--preset--border-radius--small);
      opacity: 1 !important;

      @media (max-width: 600px) {
        height: 4em;
        padding: 0.5em;
        margin-top: var(--wp--preset--spacing--20);
        .vjs-skip-backward-10,
        .vjs-skip-forward-10,
        .vjs-volume-panel,
        .vjs-current-time,
        .vjs-duration,
        .vjs-time-divider,
        .vjs-playback-rate {
          display: none !important;
        }
        .vjs-remaining-time {
          display: initial !important;
        }
      }

      .vjs-control:focus {
        text-shadow: none;
      }
      .vjs-icon-placeholder,
      .vjs-volume-level,
      .vjs-play-progress {
        &::before {
          color: var(--wp--preset--color--contrast);
        }
      }

      .vjs-time-divider {
        min-width: unset;
        padding: 0 0.25em;
      }

      .vjs-current-time,
      .vjs-duration {
        min-width: unset;
        padding: 0 0.5em;
      }

      .vjs-load-progress {
        background-color: var(--wp--custom--swatches--grey--200);
      }
      .vjs-play-progress,
      .vjs-volume-level {
        background-color: var(--wp--custom--swatches--gold--300);
      }
      .vjs-menu-content,
      .vjs-volume-vertical {
        background-color: var(--wp--custom--swatches--grey--450);
        border-radius: 3px;
      }

      .vjs-remaining-time {
        display: none;
      }
    }
  }

  @media (max-width: 600px) {
    > .go-tutorial-video-badge {
      /* top: 0.5rem; */
      right: 0.5rem;
    }
  }
}