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

@include b(carousel) {
  @include e(item) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
    z-index: #{$--index-normal - 1};

    @include when(active) {
      z-index: #{$--index-normal + 1};
    }

    @include when(animating) {
      transition: transform .4s ease-in-out;
    }

    @include m(card) {
      width: 50%;
      transition: transform .4s ease-in-out;
      &.is-in-stage {
        cursor: pointer;
        z-index: $--index-normal;
        &:hover .el-carousel__mask,
        &.is-hover .el-carousel__mask {
          opacity: 0.12;
        }
      }
      &.is-active {
        z-index: #{$--index-normal + 1};
      }
    }
  }

  @include e(mask) {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: $--color-white;
    opacity: 0.24;
    transition: .2s;
  }
}