@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;
	}
}