@import '../variables.less';

.wm-image-slider {
  width: 100%;
  position: relative;
  flex-shrink: 0;

  .swiper-box {
    width: 100%;
    height: 750px;

    div {
      flex-direction: unset;
    }

    &-flat {
      height: 374px;
    }

    .item {
      width: 100%;
      height: 100%;
      position: relative;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .video-box {
    width: 100%;
    height: 750px;
    position: relative;

    .taro-video {
      height: 100%;
    }

    .close {
      position: absolute;
      left: 20px;
      top: 20px;
      width: 40px;
      height: 40px;
      z-index: 100;
    }
    .taro-video-controls {
      flex-direction: unset;
    }
    video {
      width: 100%;
      height: 100%;
    }
  }

  .bottom-page {
    width: 100%;
    height: 48px;
    position: absolute;
    bottom: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 5;

    .play-btn {
      display: block;
      height: 40px;
      width: 40px;
      border-radius: 28px;
      align-items: center;
      flex-direction: row;

      .play {
        width: 100%;
        height: 100%;
        top: -8px;
      }
    }

    .slider-count {
      width: 104px;
      height: 48px;
      background: rgba(50, 50, 50, 0.3);
      border-radius: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 24px;

      .text {
        font-size: @font-size-14;
        color: @color-white;

        .num {
          font-size: @font-size-10;
          color: @color-white;
        }
      }
    }
  }
}