// VideoPlayer.module.less
//
@import "~@enact/sandstone/styles/variables.less";
@import "~@enact/sandstone/styles/mixins.less";
@import "~@enact/sandstone/styles/skin.less";
@import "../../style/utils.module.less";
@import "../../style/CommonStyle.module.less";
.fullscreen .videoPlayer,
.videoPlayer {
  // Set by counting the IconButtons inside the side components.
  --liftDistance: 0px;

  overflow: hidden;
  padding: 2px;
  margin: 0;
  box-sizing: border-box;

  :focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  &.fullscreen {
    width: 100%;
    height: 100%;
  }

  .video {
    height: 100%;
    width: 100%;
    background: #000;
    max-width: none;
    max-height: none;
  }

  .media {
    height: var(--media-height, calc(100% - 4px));
    width: var(--media-width, calc(100% - 4px));
    background: #000;

    &.mediaBackground {
      &:after {
        width: 560px;
        height: 200px;
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        background: linear-gradient(
          to top,
          rgba(255, 255, 255, 1),
          transparent
        );
        opacity: 0.2;
      }
    }
  }

  &.fullscreen {
    --media-width: 100vw;
    --media-height: 100vh;
  }

  .fullscreen .videoPlayer .media {
    --media-width: 100vw;
    --media-height: 100vh;
  }

  .preloadVideo {
    display: none;
  }

  .thumbnail {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    > img {
      width: 100%;
      max-height: 100%;
      border-radius: 12px;
    }
    &.noRadiusThumbnail {
      > img {
        border-radius: 0;
      }
    }
    &.verticalThumbnail {
      > img {
        width: auto;
        height: 100%;
        border-radius: 0;
      }
    }
    &.smallThumbnail {
      &::after {
        .focused(@boxShadow:0, @borderRadius: 12px);
        border: 6px solid @PRIMARY_COLOR_RED;
        top: -4px;
        right: -4px;
        bottom: -4px;
        left: -4px;
      }
    }
  }
  .disclaimer {
    .size(@w: 100% , @h: 54px);
    display: flex;
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    bottom: 0;
    left: 0;
    align-items: center;
    z-index: 1;
    > span {
      .size(@w: 18px , @h: 18px);
      background-image: url("../../../assets/images/icons/ic-alert-20@3x.png");
      background-position: center;
      background-size: cover;
      margin: 0 12px 0 20px;
    }
    > h3 {
      .size(@w: 100% , @h: 54px);
      color: #ffffff;
      font-size: 20px;
      line-height: 54px;
      .elip(@clamp:1);
      .marquee {
        width: 100%;
        transition: opacity 0.5s ease-in-out;
      }
    }
  }
  .videoOverlayWithPhoneNumberFull {
    bottom: 59px;
    left: 141px;
  }
  .videoOverlayWithPhoneNumber {
    display: none;
    &.ru {
      display: flex;

      width: 22%;
      height: 12.5%;
      bottom: 6.5% !important;
      left: 48% !important;
      padding: 4px !important;
      margin-bottom: 0 !important;
      > div:first-child {
        font-size: 12px;
        line-height: 12px;
      }
      > div:last-child {
        margin-top: 0;
        display: flex;
        align-items: center;
        > img {
          width: 14px;
          height: 14px;
        }
        > span {
          font-size: 18px;
          line-height: 18px;
          height: auto;
          width: auto;
        }
      }
    }

    &.us {
      &.vertical {
        width: 105px;
        height: 66px;
        bottom: 225px !important;
        left: -96px !important;
      }
      &.horizontal {
        > div:first-child {
          font-size: 12px;
          line-height: 1;
        }
        > div:last-child {
          display: flex;
          align-items: center;
          > img {
            width: 14px;
            height: 14px;
          }
          > span {
            font-size: 16px;
            height: auto;
            width: auto;
          }
        }
        &.qvc {
          display: flex;
          width: 18%;
          height: 22%;
          padding: 1%;
          bottom: 4% !important;
          left: 4.5% !important;
          > div:first-child {
            font-size: 48%;
          }
          > div:last-child {
            > img {
              width: 12px;
              height: 12px;
            }
            > span {
              font-size: 48%;
            }
          }
        }
        &.hsn {
          display: flex;
          width: 18.5%;
          height: 22%;
          padding: 1%;
          bottom: 4% !important;
          left: 7% !important;
          > div:first-child {
            font-size: 48%;
          }
          > div:last-child {
            > img {
              width: 12px;
              height: 12px;
            }
            > span {
              font-size: 48%;
            }
          }
        }
        &.verticalModal {
          > div:last-child {
            > img {
              width: 20px;
              height: 20px;
            }
            > span {
              font-size: 20px;
            }
          }
        }
      }
    }
    > img {
      width: 102px;
      height: 35px;
    }

    div > img {
      width: 34px;
      height: 34px;
    }
  }

  .videoOverlayMedia {
    bottom: 24% !important;
    left: 7% !important;
    &.callToOrderHide {
      display: none !important;
    }
    &.qvc {
      display: flex;
      width: 23%;
      height: 15%;
      padding: 30px 5px;
      > div:first-child {
        flex: none;
        font-size: 13px !important;
        line-height: 13px !important;
        padding: 3px 5px;
      }
      > div:last-child {
        display: flex;
        flex: none;
        align-items: center;
        height: 4px;
        > img {
          flex: none;
          width: 13px;
          height: 13px;
        }
        > span {
          flex: none;
          font-size: 15px;
          height: auto;
          width: auto;
        }
      }
    }
    &.hsn {
      display: flex;
      width: 23%;
      height: 15%;
      padding: 30px 5px;
      > div:first-child {
        flex: none;
        font-size: 13px !important;
        line-height: 13px !important;
        padding: 3px 5px;
      }
      > div:last-child {
        display: flex;
        flex: none;
        align-items: center;
        height: 4px;
        > img {
          flex: none;
          width: 13px;
          height: 13px;
        }
        > span {
          flex: none;
          font-size: 15px;
          height: auto;
          width: auto;
        }
      }
    }
  }

  .loaderWrap {
    height: 100%;
    > div {
      width: 220px;
      height: 220px;
      position: relative;
      overflow: hidden;
      left: calc(50% - 110px);
      top: calc(50% - 110px);
      background-color: transparent;
      > div {
        > div {
          -webkit-animation: mulShdSpinWhite 1.2s infinite ease !important;
          animation: mulShdSpinWhite 1.2s infinite ease !important;
        }
      }
    }
  }
  @-webkit-keyframes mulShdSpinWhite {
    0%,
    100% {
      -webkit-box-shadow: 0em -2.6em 0em 0em #fff,
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
      box-shadow: 0em -2.6em 0em 0em #fff,
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }
    12.5% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
        1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
        1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }
    25% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    37.5% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    50% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    62.5% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    75% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    87.5% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
    }
  }

  @keyframes mulShdSpinWhite {
    0%,
    100% {
      -webkit-box-shadow: 0em -2.6em 0em 0em #fff,
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
      box-shadow: 0em -2.6em 0em 0em #fff,
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }
    12.5% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
        1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
        1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }
    25% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    37.5% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    50% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    62.5% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    75% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    87.5% {
      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
    }
  }

  .overlay {
    .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
    pointer-events: auto;
    z-index: 10;
  }
  @keyframes spin {
    0% {
      transform: rotate(0.25turn);
    }
    33% {
      transform: rotate(0.5turn);
    }
    80% {
      transform: rotate(0.95turn);
    }
    85% {
      transform: rotate(1turn);
    }
    100% {
      transform: rotate(1.25turn);
    }
  }
  .spinner {
    background-image: url("../../../assets/images/player/icon_loading.png");
    width: 100px;
    height: 100px;
    position: relative;
    background-size: cover;
    border-radius: 20.8125rem;
    overflow: hidden;
    // margin: 490px auto;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    animation: none 1.25s linear infinite;
    animation-name: spin;
    // animation-play-state: paused;
  }
  .controlFeedbackBtnLayer {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
    height: 94px;
    display: flex;
    justify-content: space-between;
    &.lift {
      transform: translateY(~"calc(var(--liftDistance) * -1)");
      transition: transform 0.3s linear;
    }
  }
  .fullscreen {
    .miniFeedback {
      position: absolute;
      z-index: 50;
      top: 506px;
      left: 0;
      padding: 0;
      width: 100%;
      height: 94px;
      -webkit-margin-end: 0px;
      pointer-events: none;
    }
    &.liveFullScreen {
      .bottom {
        bottom: 78px;
      }
    }
    .bottom {
      position: absolute;
      z-index: 3; // Value assigned as part of the VideoPlayer API so layers may be inserted in-between
      bottom: 70px;
      // bottom: 78px;
      // bottom: -18px;
      left: 0;
      right: 0;
      height: 70px;
      // left: @sand-video-player-padding-side;
      // right: @sand-video-player-padding-side;

      &.videoVerticalBottom {
        height: 54px;
      }
      &.lift {
        transform: translateY(~"calc(var(--liftDistance) * -1)");
        transition: transform 0.3s linear;
      }

      &.hidden {
        pointer-events: none;

        .sliderContainer {
          position: absolute;
          left: 0;
          right: 0;
        }
      }

      .infoFrame {
        display: flex;
        margin-left: 64px;
      }

      .sliderContainer {
        display: flex;
        position: relative;
        align-items: center;
        margin-left: 60px;
        margin-right: 59px;
        height: 70px;
        bottom: -20px;
        > *:first-child {
          text-align: right;
          margin-right: 12px;
        }
        > *:nth-child(2) {
          margin-right: 12px;
        }

        .enact-locale-rtl({
					direction: ltr;
				});

        &.videoVertical {
          margin-left: 680px;
          margin-right: 673px;
        }
      }
    }
  }

  .controlsHandleAbove {
    pointer-events: none;
    z-index: -1;
    .position(@position: absolute, @top: 0, @right: 0, @bottom: auto, @left: 0);
  }

  // Skin colors
  .applySkins({
		.fullscreen {
			.bottom {
				background-color: @sand-video-player-bottom-bg-color;

				.infoFrame {
					text-shadow: @sand-video-player-title-text-shadow;
				}
			}
		}

		.overlay {
			z-index: 2;

      &.scrim::before,
      &.scrim::after {
        width: 1920px;
        height: 50%;
        position: absolute;
        left: 0;
        content: "";
        z-index: 4;
      }
      &.scrim::before {
        bottom: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, transparent 50%);
      }
      &.scrim::after {
        top: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, transparent 50%);
      }

			// &.scrim::after {
			// 	background: @sand-video-player-scrim-gradient-color
			// }
		}
	});
}