// Same as max-width of wrapper container
$bolt-video-wrapper--max-width: bolt-breakpoint(xxlarge);
$bolt-video-background-color: rgba(22, 26, 60, 0.8);
$bolt-video-background-max-height: 50.625vw;

#{$bolt-namespace}-video {
  display: block;
  width: 100%;
  background-color: var(
    --bolt-color-black
  ); // placeholder color before poster loads up.

  // @todo: `isBackgroundVideo` will be removed with Bolt v3.0
  &[is-background-video] {
    flex-grow: 1;
    opacity: bolt-opacity(0);
    z-index: 20;
    min-width: 100%;
    max-width: none;
    max-width: 100vh;
    height: calc((90vw * (9 / 16)) - 4rem);
    max-height: 56.25vh;
    margin-right: auto;
    margin-left: auto;
    pointer-events: none;
    background-color: $bolt-video-background-color;
    transition: opacity 0.3s ease, min-height 0.3s ease;

    @media (max-width: (bolt-breakpoint(small) - 1px)) {
      min-height: calc(#{$bolt-video-background-max-height} + 2.5rem);
    }

    .is-expanded & {
      opacity: bolt-opacity(100);
      pointer-events: auto;
    }

    .video-js {
      position: relative;
      width: 100%;
      min-width: 0;
      height: 100%;
      margin: 0 auto;
      pointer-events: none;
      background-color: transparent;
      transition: all 0.4s ease;

      .is-expanded & {
        pointer-events: auto;
      }

      &:not(.vjs-fullscreen) {
        max-width: 1400px;
      }
    }
  }
}

/**
  * 1. 90vw instead of 100vw so the video close button
  * doesn't spill outside of the video container in IE 11 /
  * on Windows
  */
.c-#{$bolt-namespace}-video {
  z-index: bolt-z-index('tooltip');
  width: 100%;
  max-width: none;
  transition: transform 0.4s cubic-bezier(0.645, 0, 0.355, 1);

  // Force control icons to be visible at smaller layout sizes, commented out names are shown here to indicate which ones are hidden.
  .video-js.vjs-layout-tiny,
  .video-js.vjs-layout-x-small,
  .video-js.vjs-layout-small {
    &:not(.vjs-fullscreen) {
      /* .vjs-time-divider, */
      /* .vjs-duration, */
      /* .vjs-volume-panel, */
      /* .vjs-volume-control, */
      .vjs-mute-control,
      .vjs-playback-rate,
      .vjs-current-time,
      .vjs-button.vjs-share-control {
        display: flex;
      }
    }
  }

  &.c-#{$bolt-namespace}-video--background {
    display: block;
    position: relative;
    max-width: calc(100% - var(--bolt-spacing-x-large));
    height: $bolt-video-background-max-height;
    max-height: 100%;
    margin: 0 auto;

    @media (max-width: (bolt-breakpoint(small) - 1px)) {
      max-width: calc(100vw - 40px);
    }

    @include bolt-mq(small) {
      width: calc(90vw - 7rem);
      max-width: 100vh;
      height: calc((90vw * (9 / 16)) - 4rem);
      max-height: 56.25vh;
    }
  }
}

.c-#{$bolt-namespace}-video__close-button {
  opacity: bolt-opacity(
    0
  ); // Initial state before brightcove video player kicks in
  position: absolute;
  top: var(--bolt-spacing-y-xsmall);
  right: var(--bolt-spacing-x-xsmall);
  z-index: bolt-z-index('tooltip');
  color: var(--bolt-color-orange);
  transition: all 0.3s ease;

  @include bolt-mq(small) {
    right: calc(
      var(--bolt-spacing-x-large) / -2 - var(--bolt-spacing-x-xsmall)
    );
  }

  &:hover {
    @include bolt-opacity(100);
  }

  &:active {
    @include bolt-opacity(60);
  }

  .is-collapsed & {
    @include bolt-opacity(0);
    pointer-events: none;
  }

  .is-expanded & {
    @include bolt-opacity(80);
    pointer-events: auto;
  }
}

.c-#{$bolt-namespace}-video__close-button--icon-to-text {
  @media (max-width: (bolt-breakpoint(small) - 1px)) {
    display: block;
    position: relative;
    top: 0;
    right: 0;
    float: right;

    .c-#{$bolt-namespace}-video__close-button-icon {
      display: none;
    }
  }
  @media (min-width: bolt-breakpoint(small)) {
    position: absolute;

    .c-#{$bolt-namespace}-video__close-button-text {
      @include bolt-visuallyhidden;
    }
  }
}

.c-#{$bolt-namespace}-video__close-button:not(.c-#{$bolt-namespace}-video__close-button--icon-to-text) {
  .c-#{$bolt-namespace}-video__close-button-text {
    @include bolt-visuallyhidden;
  }
}

.c-#{$bolt-namespace}-video__close-button-icon,
.c-#{$bolt-namespace}-video__close-button-text {
  cursor: pointer;
}

.c-#{$bolt-namespace}-video__close-button-text {
  color: var(--bolt-color-white);
  text-decoration: underline;
}

.c-#{$bolt-namespace}-video--hide-controls {
  .video-js .vjs-control-bar {
    display: none;
  }

  .video-js {
    pointer-events: none;
  }
}

// Prevent Brightcove from rendering a video as a 'vjs-layout-tiny'
// when in a inactive accordion or tab panel on load if on a tablet or desktop device
bolt-accordion-item,
bolt-tab-panel {
  @include bolt-mq($from: medium) {
    .video-js.vjs-layout-tiny:not(.vjs-fullscreen) {
      // Remaining time should never be shown.  Other controls that shouldn't be forced to show, but sometimes do show--
      // such as the subs-caps button-- are typically hidden with an !important declaration when they should be hidden.
      // This seems to be the exception.
      //
      // .vjs-remaining-time,
      .vjs-audio-button,
      .vjs-captions-button,
      .vjs-chapters-button,
      .vjs-current-time,
      .vjs-descriptions-button,
      .vjs-duration,
      .vjs-mute-control,
      .vjs-playback-rate,
      .vjs-progress-control,
      .vjs-subs-caps-button,
      .vjs-subtitles-button,
      .vjs-time-divider,
      .vjs-volume-control,
      .vjs-volume-panel {
        display: flex;
      }
    }
  }
}