.detailed,
.fullscreen {
  .video-player__volume__currnt,
  .video-player__volume::before {
    bottom: 27px;
  }

  .video-player__volume__handle {
    bottom: 23px;
  }
}

.video-player {
  &__controls {
    background: linear-gradient(0deg, #000000d9 0, #00000073 60%, transparent);
  }

  &__buttons {
    @apply flex min-w-[30px] items-center text-base whitespace-nowrap overflow-hidden text-ellipsis flex-initial;
    flex: 0 1 auto;

    .player-button {
      @apply inline-block outline-0 bg-transparent text-base border-0 text-white/75 active:text-white hover:text-white focus:text-white;
      flex: 0 0 auto;
      padding: 5px 6px;

      .svg-icon {
        @apply w-5 h-5;
      }

      &:active,
      &:hover,
      &:focus {
        @apply text-white;
      }
    }
  }

  &__volume {
    @apply inline-flex cursor-pointer h-6 relative overflow-hidden before:content-[''] before:w-12 before:bg-white/35 before:rounded before:absolute before:h-1 before:left-0 before:top-1/2;
    flex: 0 0 auto;

    .no-reduce-motion & {
      transition: all 100ms linear;
    }

    &::before {
      transform: translate(0, -50%);
    }

    &__current {
      @apply bg-accent-500 block absolute h-1 rounded left-0 top-1/2;
      transform: translate(0, -50%);
    }

    &__handle {
      @apply bg-accent-500 absolute z-[3] rounded-[50%] size-3 top-1/2 left-0 -ml-1.5 opacity-0;
      transform: translate(0, -50%);
      box-shadow: 1px 2px 6px #0003;

      .no-reduce-motion & {
        transition: opacity 100ms linear;
      }
    }
  }

  &__link {
    a {
      @apply no-underline text-sm font-medium text-white hover:underline active:underline focus:underline;
    }
  }

  &__seek {
    @apply cursor-pointer h-6 relative before:content-[''] before:w-full before:bg-white/35 before:rounded before:block before:absolute before:h-1 before:top-3.5;

    &__handle {
      @apply bg-accent-500 absolute z-[3] opacity-0 rounded-[50%] size-3 top-2.5 -ml-1.5;
      box-shadow: 1px 2px 6px #0003;

      .no-reduce-motion & {
        transition: opacity 0.1s ease;
      }
    }
  }
}
