@import "mixins/mixins";
@import "common/var";

@include b(carousel) {
  position: relative;

  @include m(horizontal) {
    // overflow-x: hidden;
    overflow: hidden; // 垂直方向有滚动条
  }
  @include m(horizontalTop) {
    overflow-x: hidden;
  }
  @include m(vertical) {
    overflow-y: hidden;
  }
  @include m(verticalLeft) {
    overflow-y: hidden;
  }

  @include m(card) {
    .el-carousel__container {
      height: 150px;
    }
  }


  @include e(container) {
    position: relative;
    height: 300px;
  }

  @include e(arrow) {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: $--font-line-height-primary;
    width: $--font-line-height-primary;
    cursor: pointer;
    transition: .3s;
    // border-radius: 50%;
    border-radius: $--border-radius-circle;
    background-color: rgba(255,255,255,0.3);
    color: $--color-white;
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    text-align: center;
    font-size: $--carousel-arrow-font-size;
    @include m(left) {
      left: 16px;

    }

    @include m(right) {
      right: 16px;

    }

    &:hover {
      background-color: rgba(255, 255, 255, 0.6);
    }

    & i {
      cursor: pointer;
    }

  }

  @include e(indicators) {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: #{$--index-normal + 1};

    @include m(horizontal) {
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1500) 100%);
      width: 100%;
      text-align: center
    }
    @include m(horizontalTop) {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1500) 100%);
      width: 100%;
      text-align: center;
      line-height: 42px
    }
    @include m(vertical) {
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1500) 100%);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    @include m(verticalLeft) {
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1500) 100%);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @include m(outside) {
      bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
      text-align: center;
      position: static;
      transform: none;
      background: #fff !important;
      .el-carousel__indicator:hover button {
        opacity: 1;
      }
      button {
        background-color: $--carousel-indicator-out-color;
        opacity: 0.24;
      }
    }

    @include m(labels) {
      left: 0;
      right: 0;
      transform: none;
      text-align: center;

      .el-carousel__button {
        height: auto;
        width: auto;
        padding: 2px 18px;
        font-size: $--font-size-body-1;
      }

      .el-carousel__indicator {
        padding: 6px 4px;
      }
    }
  }

  @include e(indicator) {
    position: relative;
    background-color: transparent;
    cursor: pointer;

    // &:hover {
    //   button {
    //     opacity: 1;
    //     border-radius: $--border-radius-small;
    //   }
    //   .el-carousel__button--line {
    //     background-color: $--color-white;
    //     border-radius: $--border-radius-small!important;
    //   }
    // }

    @include m(horizontal) {
      display: inline-block;
    }
    @include m(horizontalTop) {
      display: inline-block;
    }
    @include m(verticalLeft) {
      .el-carousel__button {
        width: $--carousel-indicator-height;
        height: $--carousel-indicator-width;
        margin: $--carousel-indicator-button-vertical-margin;
        @include m(circle) {
          width: $--carousel-indicator-button-circle;
          height: $--carousel-indicator-button-circle;
          // border-radius: 50%;
          border-radius: $--border-radius-circle;
        }
        @include m(line) {
          width: $--carousel-indicator-button-vertical-line-width;
          height: $--carousel-indicator-button-vertical-line-height;
          margin: $--carousel-indicator-button-line-margin-left;
        }
        &.indicator-line-background {
          width: $--carousel-indicator-button-vertical-line-width;
          height: $--carousel-indicator-button-vertical-line-height;
          margin: $--carousel-indicator-button-line-margin-left;
        }
      }
    }
    @include m(vertical) {
      .el-carousel__button {
        width: $--carousel-indicator-height;
        height: $--carousel-indicator-width;
        margin: $--carousel-indicator-button-vertical-margin;
        @include m(circle) {
          width: $--carousel-indicator-button-circle;
          height: $--carousel-indicator-button-circle;
          // border-radius: 50%;
          border-radius: $--border-radius-circle;
        }
        @include m(line) {
          width: $--carousel-indicator-button-vertical-line-width;
          height: $--carousel-indicator-button-vertical-line-height;
          margin: $--carousel-indicator-button-vertical-line-margin;
        }
        &.indicator-line-background {
          width: $--carousel-indicator-button-vertical-line-width;
          height: $--carousel-indicator-button-vertical-line-height;
          margin: $--carousel-indicator-button-line-margin-left;
        }
      }
    }
    @include when(active) {
      button {
        opacity: 1;
      }
      .el-carousel__button--line {
        background-color: $--color-white;
      }
    }
  }

  @include e(button) {
    display: block;
    opacity: 0.48;
    width: $--carousel-indicator-width;
    height: $--carousel-indicator-height;
    border-radius: $--border-radius-small;
    background-color: $--color-white;
    border: none;
    outline: none;
    padding: 0;
    margin: $--carousel-indicator-button-margin;
    cursor: pointer;
    transition: .3s;
    &.indicator-line-background {
      width: $--avatar-small-size;
      margin: $--carousel-indicator-button-line-margin;
      border-radius: 0;
    }
    @include m(line) {
      position: absolute;
      top: 0;
      left: 0;
      width: $--avatar-small-size;
      height: $--carousel-indicator-height;
      background-color: transparent;
      border-radius: $--border-radius-none;
      margin: $--carousel-indicator-button-line-margin;
      border: none;
      outline: none;
      padding: 0;
      transition: .3s;
    }

    @include m(circle) {
      width: $--carousel-indicator-button-circle;
      height: $--carousel-indicator-button-circle;
      // border-radius: 50%;
      border-radius: $--border-radius-circle;
      margin: 21px 4px;
    }
  }
  &.ulLine {
    ul.el-carousel__indicators--horizontal,
    ul.el-carousel__indicators--horizontalTop
    {
      li {
        &:nth-child(1) {
          .el-carousel__button {
            border-radius: $--border-radius-small 0 0 $--border-radius-small;
          }
        }
        &:last-child() {
          .el-carousel__button {
            border-radius: 0 $--border-radius-small $--border-radius-small 0;
          }
        }
        &.is-active {
          .el-carousel__button--line {
            border-radius: $--border-radius-small;
          }
        }
      }
    }
    ul.el-carousel__indicators--verticalLeft,
    ul.el-carousel__indicators--vertical {
      li {
        &:nth-child(1) {
          .el-carousel__button {
            border-radius: $--border-radius-small $--border-radius-small 0 0;
          }
        }
        &:last-child() {
          .el-carousel__button {
            border-radius: 0 0 $--border-radius-small $--border-radius-small;
          }
        }
        &.is-active {
          .el-carousel__button--line {
            border-radius: $--border-radius-small;
          }
        }
      }
    }
  }

}
.carousel-arrow-left-enter,
.carousel-arrow-left-leave-active {
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
}

.carousel-arrow-right-enter,
.carousel-arrow-right-leave-active {
  transform: translateY(-50%) translateX(10px);
  opacity: 0;
}