@import "../player-skins/TOKENS";
.vplayer{

  > .vp-inner {
    > .video-description.video-description-style-gradient {
      width: 70%;
      height: 100%;
      top: 0;
      left: 0;

      padding: 30px;

      display: flex;
      align-items: center;

      color: #444444;;
      overflow: hidden;
      pointer-events: none;

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.79) 75%, rgba(255, 255, 255, 0) 100%);


        transform: translate3d(0, 0, 0);

        $transition-property: transform;
        $transition-duration: 0.3s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);

      }

      > div {

        pointer-events: auto;
        max-width: 50%;
        position: relative;
        transform: translate3d(0, 0, 0) scale(1);

        $transition-property: transform;
        $transition-duration: 0.3s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
    }
  }

  &.is-playing {
    .vp-inner {

      .video-description-style-gradient {
        &:before {

          transform: translate3d(-50%, 0, 0);
        }

        > div {

          transform: translate3d(0, 0, 0) scale(0.75);
        }
      }
    }
  }

  &.under-420 {


    .vp-inner > .video-description.video-description-style-gradient {

      > div {

        max-width: 120%;
      }
    }
  }
}