// import slick slider
@use "~slick-carousel/slick/slick.scss";

@use "../utilities/mixins" as *;
@use "../utilities/colors" as *;
@use '../base/merlin' as *;

ul.slick-dots {
	@extend .absolute;

	li {
		height: 8px;
		width: 8px;
		background-color: rgba(#FFF, 0.5);
		margin: 0;
		cursor: pointer;
		@extend .left;
		@extend .border-radius-xl;
		@extend .transition;
		@extend .relative;

		button {
			display: none;
		}

		&.slick-active,
		&:hover {
			background-color: #FFF;
			display: inline-flex;
			justify-content: center;
			align-items: center;

			&:before {
				content: "";
				width: 13px;
				height: 13px;
				border: 1px solid var(--contrast-color);
				position: absolute;
				border-radius: 50%;
			}
		}
	}
}

.slick-arrow {
	top: 50%;
	padding: 0;
	width: 50px;
	height: 50px;
	border: none;
	font-size: 0;
	cursor: pointer;
	background-color: #FFF;
	@extend .border-radius-xl;
	@extend .absolute;
	@extend .z-index-2;
	@extend .transition;

	&:before {
		@extend .font-30;
	}

	&.slick-prev {
		left: 25px;
		@include icomoon("icon-arrow-left");
	}

	&.slick-next {
		right: 25px;
		@include icomoon("icon-arrow-right");
	}

	&.slick-disabled {
		cursor: inherit;
		pointer-events: none;
		opacity: 0;
	}

	&:hover {
		background-color: $black;
		color: #FFF;
	}
}


.slider-progress {
	margin-top: 2rem;
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 10px;
	overflow: hidden;

	position: relative;

	background-color: rgba($secondary-color, .1);
	background-image: linear-gradient(to right, var(--primary-color), var(--primary-color));
	background-repeat: no-repeat;
	background-size: 0 100%;

	transition: background-size .4s ease-in-out;

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}
}