@import '../../../style/index.less';

.llap-display-none {
  display: none !important;
}

.ll-audio-player {
  .ll-audio-player-container {
    .ll-audio-player-container-audio {
      display: flex;
      flex-direction: row;
      overflow: hidden;
      align-items: center;
      height: 48px;
      position: relative;


      .llap-audio-btn-pause, .llap-audio-btn-play {
        font-size: 48px;
        height: 48px;
        line-height: 0;
        cursor: pointer;
        color: @blue-6;
      }

      .llap-next-audio-btn {
        margin-left: 16px;
      }

      .llap-last-audio-btn {
        margin-right: 16px;
      }

      .llap-last-audio-btn, .llap-next-audio-btn {
        color: @blue-6;
        opacity: .3;
        font-size: 24px;
        height: 24px;
        line-height: 0;
        cursor: pointer;
      }

      .llap-last-audio-btn.llap-last-audio-btn-hover, .llap-next-audio-btn.llap-next-audio-btn-hover {
        opacity: 1;
      }

      .llap-audio-btn-pause, .llap-audio-btn-play, .llap-last-audio-btn-hover, .llap-next-audio-btn-hover {
        &:hover {
          color: @blue-independent-18;
        }
      }

      .llap-slider-box-parent {
        margin-left: 24px;
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .llap-slider-box {
          flex: 1;

          .ant-slider-handle {
            border: none;
            background: @blue-6;
          }

          .ant-slider .ant-slider-rail {
            background: fade(@blue-6, 30%);
          }

          .ant-slider .ant-slider-track {
            background: @blue-6;
          }
        }
      }

      span.llap-time-slider-time {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.45);
        letter-spacing: 0.05rem;
        font-weight: 400;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }

}