.is-style-black {
  .custom-video {
    &.video-js {
      &.vjs-fullscreen {
        .vjs-control-bar {
          .vjs-fullscreen-control {
            .vjs-icon-placeholder {
              &::before {
                background-image: url("../images/video/reduce-black.svg");
              }
            }
          }
        }
      }

      .vjs-control-bar {
        @apply
          bg-gradient-to-t
          from-primary-50
          to-transparent;

        .vjs-mute-control {
          &.vjs-vol-0 {
            .vjs-icon-placeholder {
              &::before {
                background-image: url("../images/video/mute-black.svg");
              }
            }
          }

          .vjs-icon-placeholder {
            &::before {
              background-image: url("../images/video/select-volume-black.svg");
            }
          }
        }

        .vjs-volume-vertical {
          .vjs-slider {
            background-image: url("../images/video/volume-opacity-black.svg");
          }

          .vjs-volume-level {
            background-image: url("../images/video/volume-black.svg");
          }
        }

        .vjs-play-control {
          &.vjs-playing {
            .vjs-icon-placeholder {
              &::before {
                background-image: url("../images/video/pause-black.svg");
              }
            }
          }

          .vjs-icon-placeholder {
            &::before {
              background-image: url("../images/video/play-black.svg");
            }
          }
        }

        .vjs-progress-control {
          .vjs-progress-holder,
          .vjs-load-progress,
          .vjs-load-progress > div {
            @apply
              bg-black;
          }

          .vjs-play-progress {
            @apply
              bg-black;

            &::before {
              @apply
                bg-black;

              content: "";
            }
          }
        }

        .vjs-fullscreen-control {
          .vjs-icon-placeholder {
            &::before {
              background-image: url("../images/video/fullscreen-black.svg");
            }
          }
        }
      }
    }
  }
}

.custom-video {
  &.video-js {
    @apply
      h-[unset]
      w-[unset]
      aspect-video;

    &.vjs-fullscreen {
      .vjs-control-bar {
        .vjs-fullscreen-control {
          .vjs-icon-placeholder {
            &::before {
              background-image: url("../images/video/reduce.svg");
            }
          }
        }
      }
    }

    .vjs-control-bar {
      @apply
        bg-transparent
        px-[8px]
        h-15
        bg-gradient-to-t
        from-primary-800
        to-transparent;

      .vjs-volume-vertical {
        @apply
          bottom-15;

        * {
          @apply
            bg-transparent;
        }

        .vjs-slider {
          @apply
            bg-transparent
            bg-bottom
            w-[14px]
            bg-no-repeat;

          background-size: 17px auto;
          background-image: url("../images/video/volume-opacity.svg");
        }

        .vjs-volume-level {
          @apply
            absolute
            bottom-0
            bg-transparent
            overflow-hidden
            bg-bottom
            bg-no-repeat
            w-[14px]
            before:hidden;

          background-size: 17px auto;
          background-image: url("../images/video/volume.svg");
        }
      }

      .vjs-volume-control {
        @apply
          bg-transparent
          mr-0
          pr-2
          mb-0
          justify-start;
      }

      .vjs-mute-control {
        @apply relative p-0;

        &.vjs-vol-0 {
          .vjs-icon-placeholder {
            @apply
              flex
              justify-start
              pl-1
              relative
              right-[3px]

              before:bg-center
              before:bg-contain
              before:bg-no-repeat
              before:relative
              before:h-[25px]
              before:w-[25px];

            &::before {
              background-image: url("../images/video/mute-volume.svg");
            }
          }
        }

        .vjs-icon-placeholder {
          @apply
            flex
            justify-start
            pl-1

            before:bg-center
            before:bg-contain
            before:bg-no-repeat
            before:relative
            before:h-4.5
            before:w-4.5;

          &::before {
            background-image: url("../images/video/select-volume.svg");
          }
        }
      }

      .vjs-play-control {
        @apply
          relative;

        &.vjs-playing {
          .vjs-icon-placeholder {
            @apply
              flex
              justify-end
              pr-1

              before:bg-center
              before:bg-contain
              before:bg-no-repeat
              before:relative
              before:h-4.5
              before:w-4.5;

            &::before {
              background-image: url("../images/video/pause.svg");
            }
          }
        }

        .vjs-icon-placeholder {
          @apply
            flex
            justify-end
            pr-1

            before:bg-center
            before:bg-contain
            before:bg-no-repeat
            before:relative
            before:h-4.5
            before:w-4.5;

          &::before {
            background-image: url("../images/video/play.svg");
          }
        }
      }

      .vjs-volume-panel {
        @apply
          order-10;
      }

      .vjs-fullscreen-control {
        @apply
          order-12
          items-center
          justify-start;

        .vjs-icon-placeholder {
          @apply
            flex
            justify-start
            pr-1

            before:bg-center
            before:bg-contain
            before:bg-no-repeat
            before:relative
            before:h-4.5
            before:w-4.5;

          &::before {
            background-image: url("../images/video/fullscreen.svg");
          }
        }
      }

      .vjs-remaining-time {
        @apply
          hidden;
      }

      .vjs-progress-control {
        .vjs-progress-holder,
        .vjs-load-progress,
        .vjs-load-progress > div {
          @apply
            h-px
            bg-white;
        }

        .vjs-play-progress {
          &::before {
            @apply
              rounded-full
              block
              absolute
              top-[-3px]
              w-[7px]
              h-[7px]
              bg-white;

            content: "";
          }
        }
      }
    }
  }
}
