.video {
  &-wrapper {
    @apply relative overflow-hidden;
    #backgroundPlayer {
      @apply absolute 
          z-[1]
          pointer-events-none
          left-[50%]
          top-[50%]
          translate-x-[-50%]
          translate-y-[-50%]
          opacity-0;
      transition: 0.8s;
    }
    &.started,
    &.playing {
      #backgroundPlayer {
        @apply opacity-100;
        transition: 0.8s 0.5s opacity;
      }
    }
    &.autoplay {
      .video-controls {
        @apply hidden;
      }
    }
    &.fullscreen-active {
      > div:first-child {
        @apply flex pointer-events-auto;
      }
    }

    img {
      @apply !h-full
          z-0;
    }
  }

  &-controls {
    @apply absolute
    text-white
    z-[2];
  }
}

body {
  #video-fullscreen {
    @apply absolute
    inset-0
    !scale-100;

    #fullPlayer {
      @apply bg-black
       absolute
       inset-0;
    }
    .video {
      &-controls {
        @apply absolute
            z-[2]
            inset-0
           text-white;

        &-toolbar {
          @apply absolute
          gap-y-2
              left-4
              right-4
              bottom-4;

          &-buttons {
            @apply w-full
                gap-x-2;
          }
        }

        .button-video {
          &-close {
            @apply absolute
            top-4
            text-white
            justify-center
            items-center
            right-4;

            svg {
              @apply w-4 h-4;
            }
          }
          &-fullscreen {
            &-mute,
            &-un-mute {
              svg {
                @apply w-4
                h-4;
              }
            }
          }
        }
      }

      &-timeline {
        @apply w-full
        h-1
        cursor-pointer
        bg-white/30;

        &-progress {
          @apply relative
          h-full
          z-[1]
            bg-white;
        }

        &-loaded {
          @apply top-0
            left-0
            bg-white/10
            bottom-0;
        }

        &:after {
          @apply absolute
            z-10
            -top-2
            h-5
            left-0
            right-0;
          content: "";
        }
      }

      &-timer {
        @apply ml-auto;
      }
    }
  }
}