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

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

.video-player {
  &__controls {
    @apply bg-primary-200 dark:bg-primary-700 black:bg-primary-800 box-border ring-0 transition-all duration-300 ease-in-out;
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -4rem;
    z-index: 2;
    opacity: 0.8;
    border-radius: 0.625rem;
    padding: 0.25rem 0.75rem;

    &--visible {
      bottom: 0.75rem;
    }

    &:has(.video-player__seek) {
      padding-top: 0.5rem;
    }
  }

  &__buttons {
    @apply flex items-center text-base whitespace-nowrap overflow-hidden text-ellipsis flex-initial gap-1;
    flex: 0 1 auto;

    .player-button {
      @apply block outline-0 bg-transparent text-base border-0 text-black dark:text-white rounded-full;
      flex: 0 0 auto;
      padding: 4px;

      &:hover {
        @apply dark:bg-primary-200/20 bg-primary-700/20 rounded-full;
      }

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

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

    &::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;
      transform: translate(0, -50%);
    }
  }

  &__link {
    @apply px-2.5 py-0.5 xl:hidden;

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

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

    &__handle {
      @apply bg-accent-500 absolute z-[3] rounded-[50%] size-3 -ml-1.5;

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