@import url(~antd/lib/carousel/style/index-pure.less);
@import '../../style/themes/index';

.@{carousel-prefix-cls} {
	// Arrow
	.slick-arrow {
		transition: background-color @animation-duration-slow @ease-in-out,
			opacity @animation-duration-base @ease-in-out;
		border-radius: 50%;

		// Clean Antd Style.
		&,
		&:hover,
		&:focus {
			color: @gray-60;
			font-size: @iconfont-size-xl;
			background: initial;
		}

		&:hover {
			background-color: @component-background-hover;
		}

		&.slick-disabled {
			cursor: not-allowed;
			color: @gray-30;

			&:hover {
				background: initial;
			}
		}
	}
	.slick-prev,
	.slick-next {
		width: @iconfont-size-xl;
		height: @iconfont-size-xl;
		margin-top: 0;
		transform: translate(0, -50%);
		svg {
			width: 100%;
			height: 100%;
		}
	}

	// Dots
	.slick-dots li {
		margin-left: calc(@carousel-dot-margin / 2);
		margin-right: calc(@carousel-dot-margin / 2);

		button {
			background-color: #000;
			border-radius: 0;
			width: 100% !important;
			&:hover {
				background-color: #fff;
				opacity: 0.8;
			}
		}
	}

	& &-circle-dot {
		.slick-dots li {
			&:hover {
				cursor: pointer;
			}

			button {
				border-radius: calc(@carousel-dot-height / 2);
			}
		}
	}

	.slick-prev {
		left: calc(-@iconfont-size-xl - 16px);

		// Remove native arrow
		&::before {
			content: none;
		}
	}

	.slick-next {
		right: calc(-@iconfont-size-xl - 16px);

		// Remove native arrow
		&::before {
			content: none;
		}
	}
}

// DotsType Circle
.@{carousel-prefix-cls} {
	& &-circle-dot {
		.slick-dots li {
			width: @carousel-dot-circle-size;
			height: @carousel-dot-circle-size;

			background-color: fade(@black, 30%);
			border-radius: @carousel-dot-circle-size;

			&:hover {
				opacity: 80%;
				cursor: pointer;
				background-color: fade(@white, 80%);
			}

			button {
				background-color: transparent;
				height: 100%;
			}

			&.slick-active {
				background-color: @white;
			}
		}
	}
}

// Arrow Within
.@{carousel-prefix-cls} {
	& &-arrow-within {
		.slick-arrow {
			z-index: 1;
			color: @white;

			&:hover {
				background-color: fade(@white, 40%);
			}

			&.slick-disabled {
				cursor: not-allowed;
				opacity: 30%;

				&:hover {
					background: initial;
				}
			}
		}
		.slick-prev,
		.slick-next {
			width: @iconfont-size-xl;
			height: @iconfont-size-xl;
			svg {
				width: 100%;
				height: 100%;
			}
		}

		.slick-prev {
			left: @carousel-arrow-margin-within;
		}

		.slick-next {
			right: @carousel-arrow-margin-within;
		}
	}
}