@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'mixins/flex' as *;

.#{$namespace}-video {
  position: relative;
  width: 100%;
  height: 100%;
  outline-color: transparent;
  font-size: 14px;

  &__main {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #111;
  }

  &__player {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.25s ease;

    &--flipped {
      transform: scale(-1, 1);
    }
  }

  &__video {
    width: 100%;
    height: 100%;
    outline-color: transparent;
  }

  &__poster {
    position: absolute;
    inset: 0;

    @include flex-center;

    pointer-events: none;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &__state {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #a1adb1;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  &__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #a1adb1;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  &-state-effect-enter-active {
    animation: #{$namespace}-video-state-effect 250ms;
  }

  &-state-effect-leave-active {
    animation: #{$namespace}-video-state-effect reverse 250ms;
  }

  @keyframes #{$namespace}-video-state-effect {
    0% {
      opacity: 0%;
      transform: translate(-50%, -50%) scale(1.6);
    }

    100% {
      opacity: 100%;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  &__controls {
    position: absolute;
    inset: auto 0 0;

    @include flex-column;


    padding: 16px 0 4px;
    transition: transform 0.25s ease;

    &::before {
      position: absolute;
      inset: 0;
      pointer-events: none;
      content: '';
      background-color: unset;
      background-image: linear-gradient(to top,
          rgba(17, 17, 17, 0.75) 0%,
          transparent 100%);
      transition: opacity 0.25s ease;
    }

    &--collapsed {
      transform: translateY(51px) translateZ(0);

      &::before {
        opacity: 0%;
      }
    }

    &-top,
    &-bottom {
      z-index: 1;

      @include items-center;


      gap: 0 10px;
      width: 100%;
    }

    &-bottom {
      height: 40px;
    }

    &-left,
    &-center,
    &-right {
      flex-shrink: 0;
      @include items-center;


      height: 100%;
    }

    &-left {
      padding-inline-start: 10px;
    }

    &-center {
      flex: auto;
      justify-content: center;
    }

    &-right {
      padding-inline-end: 10px;
    }
  }

  &__progress {
    position: relative;
    width: 100%;
    padding: 0 10px;
    transition: padding 0.25s ease;

    &--disabled {
      pointer-events: none;
    }

    &-segment {
      height: 100%;
      padding: 5px 0;
    }

    &-track {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: rgba(255, 255, 255, 0.35);
      border-radius: 3px;
    }

    &-filler {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #339af0;
      border-radius: 3px;
      transition: background-color 0.25s ease;
    }

    &-slider {

      // track-height: 16px;
      // handler-size: 13px;
      // handler-scale-hover: 1;
      // handler-scale-focus: 1;
      // track-bg-color: transparent;
      // track-bg-color-hover: transparent;
      // marker-pad: 0;
      .#{$namespace}-slider__runway {
        height: 4px;
        opacity: 0.8;
      }

      .#{$namespace}-slider__bar {
        height: 4px;
      }

      .#{$namespace}-slider__button-wrapper {
        top: -16px;
      }

      .#{$namespace}-slider__button {
        width: 16px;
        height: 10px;
        border-radius: 4px;
      }
    }

    &-trigger {
      position: relative;
      width: 14px;
      height: 10px;
      background-color: var(--bg-color-fff);
      border: 2px solid #339af0;
      border-radius: 4px;
    }

    .#{$namespace}-slider {
      padding: 0;
      margin: 0;

      &__container {
        width: 100%;
        padding: 0;
        margin: 0;
      }

      &__track {
        gap: 0 3px;
      }
    }

    &-indicator {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      opacity: 0%;
      transition: opacity 0.25s ease;

      &--active {
        opacity: 100%;
      }

      $pos: calc(100% - 4.5px);
      $color: #339af0;

      &::before,
      &::after {
        position: absolute;
        left: 50%;
        content: '';
        border: 4px solid transparent;
        transform: translateX(-50%);
      }

      &::before {
        bottom: $pos;
        border-top-color: $color;
      }

      &::after {
        top: $pos;
        border-bottom-color: $color;
      }
    }
  }

  &__controls--collapsed &__progress {
    padding: 0;
  }

  &__preview {
    position: absolute;
    bottom: 100%;
    left: 0;

    @include flex-column-center;


    margin-bottom: 10px;
    pointer-events: none;
    opacity: 0%;
    transition: opacity 0.25s ease;

    &--active {
      opacity: 100%;
    }

    &-image {
      position: relative;
      width: 60px;
      padding-top: 100%;

      @supports (aspect-ratio: 16 / 9) {
        aspect-ratio: 16 / 9;
        padding-top: 0;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    &-time {
      @include flex-column-center;


      padding: 6px;
      line-height: 1;
      color: rgba(255, 255, 255, 0.85);
      background-color: rgba(0, 0, 0, 0.75);
      border-radius: 2px;
      box-shadow: 0 0 6px #000;
    }

    &--has-image &-time {
      position: absolute;
      bottom: 0;
    }
  }

  &__control {
    @include flex-center;


    min-width: 32px;
    height: 100%;
    line-height: 1;
    color: rgba(255, 255, 255, 1);
    transition: color 0.25s ease;

    &:hover,
    &:focus-within {
      color: var(--bg-color-fff)
    }

    &--disabled {

      &,
      &:hover,
      &:focus-within {
        color: rgba(255, 255, 255, 0.5);
        cursor: not-allowed;
      }
    }

    &-button {
      @include flex-center;


      width: 100%;
      height: 100%;
      padding: 0 6px;
      line-height: inherit;
      color: inherit;
      cursor: pointer;
      background-color: transparent;
      border: 0;
      outline: 0;
    }

    &--disabled &-button {
      cursor: not-allowed;
    }

    &-tip,
    &-panel {
      flex-direction: column;

      @include items-center;

      margin-bottom: 10px;
      color: rgba(255, 255, 255, 0.85);
      background-color: rgba(0, 0, 0, 0.75);
      border-radius: 2px;
      box-shadow: 0 0 6px #000;
      padding: 0;
    }

    &-tip {
      padding: 6px;
    }

    &-name,
    &-shortcut {
      display: inline-flex;
      align-items: center;
      line-height: 1;
      white-space: nowrap;
    }

    &-shortcut {
      margin-inline-start: 3px;
    }

    &-options {
      @include flex-column;


      width: 100%;
      padding: 5px 0;
      margin: 0;
      user-select: none;

      li {
        list-style: none;
        padding: 5px 15px;
      }
    }

    &-option {
      justify-content: center;
      color: rgba(255, 255, 255, 0.85);
      text-align: center;
      background-color: transparent;

      &:hover {
        color: var(--bg-color-fff);
        background-color: rgba(255, 255, 255, 0.15);
      }

      &--selected {
        color: var(--bg-color-fff);
        background-color: rgba(255, 255, 255, 0.15);
      }

      &--disabled {

        &,
        &:hover {
          color: rgba(255, 255, 255, 0.5);
          background-color: transparent;
        }
      }
    }
  }

  &__timer {
    @include flex-center;

    cursor: pointer;
    user-select: none;

    &-input {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 22px;
      overflow: hidden;
      color: inherit;
      background-color: rgba(var(--bg-color-fff), 30%);
      border-radius: 2px;

      .#{$namespace}-input__control {
        color: inherit;
        text-align: center;
        user-select: auto;
        background-color: transparent;
        border: 0;
        outline: 0;
      }
    }

    &-separator {
      margin: 0 1px;
    }
  }

  &__playback-rate {
    min-width: 44px;
  }

  &__volume {
    &-panel {
      width: 40px;
      height: 150px;
      padding: 6px 0;
    }

    &-text {
      flex-shrink: 0;
      padding: 2px 0 4px;
    }

    &-slider {
      width: auto;

      .#{$namespace}-slider__button {
        width: 16px;
        height: 16px;
      }
    }
  }

  &__progress-line {
    position: absolute;
    inset: auto 0 0;
    pointer-events: none;
  }
}