//
// CivicTheme Video Player component styles.
//

@use 'sass:math';

.ct-video-player {
  $root: &;

  &__wrapper {
    position: relative;
    padding-bottom: calc(var(--ct-video-ratio-height) / var(--ct-video-ratio-width) * 100%);
    padding-top: ct-spacing(3);
    height: 0;
    overflow: hidden;

    iframe,
    video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  &__transcript-block {
    display: flex;
    flex-direction: column;
    gap: ct-spacing(2);
    margin-top: ct-spacing(4);

    @include ct-breakpoint(m) {
      margin-top: ct-spacing(3);
    }
  }

  &__links-transcript {
    padding-right: ct-spacing(2);

    @include ct-breakpoint(m) {
      padding-right: ct-spacing(3);
    }
  }

  &__transcript[data-collapsible-collapsed=''] {
    #{$root}__transcript-trigger-expand {
      display: inline;
    }
    #{$root}__transcript-trigger-collapse {
      display: none;
    }
  }

  &__transcript-toggle {
    &:hover {
      #{$root}__transcript-trigger-expand,
      #{$root}__transcript-trigger-collapse {
        text-decoration: underline;
      }
    }
  }

  &__transcript-trigger-expand {
    display: none;
  }

  &__transcript-trigger-collapse {
    display: inline;
  }

  &__transcript-panel-inner {
    padding-top: ct-spacing(2);
  }
}
