Automata/packages/design-system/src/css/carousel.scss

@use 'mixins/mixins';
@use './common/var';

@include mixins.b(carousel) {
	position: relative;

	@include mixins.m(horizontal) {
		overflow-x: hidden;
	}

	@include mixins.m(vertical) {
		overflow-y: hidden;
	}

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

	@include mixins.e(arrow) {
		border: none;
		outline: none;
		padding: 0;
		margin: 0;
		height: var.$carousel-arrow-size;
		width: var.$carousel-arrow-size;
		cursor: pointer;
		transition: 0.3s;
		border-radius: 50%;
		background-color: var.$carousel-arrow-background;
		color: var.$color-white;
		position: absolute;
		top: 50%;
		z-index: 10;
		transform: translateY(-50%);
		text-align: center;
		font-size: var.$carousel-arrow-font-size;

		@include mixins.m(left) {
			left: 16px;
		}

		@include mixins.m(right) {
			right: 16px;
		}

		&:hover {
			background-color: var.$carousel-arrow-hover-background;
		}

		& i {
			cursor: pointer;
		}
	}

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

		@include mixins.m(horizontal) {
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		@include mixins.m(vertical) {
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}

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

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

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

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

	@include mixins.e(indicator) {
		background-color: transparent;
		cursor: pointer;

		&:hover button {
			opacity: 0.72;
		}

		@include mixins.m(horizontal) {
			display: inline-block;
			padding: var.$carousel-indicator-padding-vertical var.$carousel-indicator-padding-horizontal;
		}

		@include mixins.m(vertical) {
			padding: var.$carousel-indicator-padding-horizontal var.$carousel-indicator-padding-vertical;
			.el-carousel__button {
				width: var.$carousel-indicator-height;
				height: #{var.$carousel-indicator-width * 0.5};
			}
		}

		@include mixins.when(active) {
			button {
				opacity: 1;
			}
		}
	}

	@include mixins.e(button) {
		display: block;
		opacity: 0.48;
		width: var.$carousel-indicator-width;
		height: var.$carousel-indicator-height;
		background-color: var.$color-white;
		border: none;
		outline: none;
		padding: 0;
		margin: 0;
		cursor: pointer;
		transition: 0.3s;
	}
}

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

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