@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";

@videoBackgroundColor: black;
.videoContainer {
  position: absolute;
  background-color: @videoBackgroundColor;
  z-index: 21;

  .playButton {
    .size(@w: 60px, @h: 60px);
    background-image: url("../../../assets/images/btn/btn-video-play-nor@3x.png");
    background-size: cover;

    &:focus {
      .size(@w: 60px, @h: 60px);
      border-radius: 50%;
      background-color: #c70850;
      opacity: 0.5;
    }
  }

  .pauseButton {
    .size(@w: 60px, @h: 60px);
    background-image: url("../../../assets/images/btn/btn-voc-pause-nor@3x.png");
    background-size: cover;

    &:focus {
      .size(@w: 60px, @h: 60px);
      border-radius: 50%;
      background-color: #c70850;
      opacity: 0.5;
    }
  }
  .toOpenBtn {
    .size(@w: 147px, @h: 243px);
    min-width: 60px !important;
    margin: 192px 0 136px 512px;
    text-align: center;
    background-image: url(../../../assets/images/btn/btn-toopen-foc.svg);
  }

  .videoReduce {
    .size(@w:78px, @h:78px);
    background: url("../../../assets/images/btn/btn-video-min-nor@3x.png")
      no-repeat center center/60px 60px;
    position: absolute;
    right: 60px;
    bottom: 150px;
    z-index: 3;

    &:focus {
      .size(@w:78px, @h:78px);
      background-color: rgba(199, 8, 80, 0.5);
      border-radius: 50%;
    }
  }
  &.modal,
  &.background {
    width: 1px;
    height: 1px;
    left: -1px;
    top: -1px;
    pointer-events: none;
    z-index: 1;
    background-color: @videoBackgroundColor;
    overflow: visible;
    .tabContainer,
    .arrow,
    .toOpenBtn {
      display: none;
    }
  }
  &.hideSubtitle {
    video::cue {
      visibility: hidden;
    }
  }
}
