/* PLUGIN: SWIPER
-------------------------------------------- */

:root {
	--swiper-theme-color: var(--vlt-color-dark);
	--swiper-navigation-size: #{px2rem(46px)};
}

/* PARALLAX
-------------------------------------------- */

[data-parallax] {

	.swiper-slide {
		overflow-x: hidden;
	}

}

/* FULL HORIZONTAL
-------------------------------------------- */

.swiper-full-horizontal {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.swiper-container {
		width: 100%;
		margin-top: auto;
		margin-bottom: auto;
	}

	.swiper-slide {

		@include media-breakpoint-up(lg) {
			width: 770px;
		}

		@include media-breakpoint-only(md) {
			width: 600px;
		}

	}

}

/* NAVIGATION
-------------------------------------------- */

.vlt-swiper-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--swiper-navigation-size);
	height: var(--swiper-navigation-size);
	overflow: hidden;
	font-size: px2rem(13px);
	background-image: none;
	border-radius: 50%;
	outline: none;
	box-shadow: var(--vlt-box-shadow);
	transition: all var(--vlt-transition-duration) var(--vlt-transition-easing);

	svg {
		height: 1em;
	}

	&[aria-disabled="true"] {
		pointer-events: none;
		cursor: auto;
		opacity: 0.35;
	}

	&::after {
		display: none;
	}

}

.vlt-swiper-button--prev {
	left: 0;

	&:hover svg {
		animation: vlt_animate_icon_left var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;
	}

}

.vlt-swiper-button--next {
	right: 0;

	&:hover svg {
		animation: vlt_animate_icon_right var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;;
	}

}

.vlt-swiper-button--position-1,
.vlt-swiper-button--position-3 {
	position: absolute;
	top: calc(calc(var(--vlt-valign-button-value) * .5) - calc(var(--swiper-navigation-size) * 0.5));
	z-index: 5;
}

.vlt-swiper-button--prev.vlt-swiper-button--position-1 {
	left: px2rem(20px);

	@include media-breakpoint-up(xl) {
		left: 0;
		transform: translateX(-50%);
	}

}

.vlt-swiper-button--next.vlt-swiper-button--position-1 {
	right: px2rem(20px);

	@include media-breakpoint-up(xl) {
		right: 0;
		transform: translateX(50%);
	}

}

.vlt-swiper-button--position-2 {
	position: static;
	right: auto;
	left: auto;
	margin-top: unset;
}

.vlt-swiper-button--next.vlt-swiper-button--position-2 {
	margin-left: px2rem(11px);
}

.vlt-swiper-button--prev.vlt-swiper-button--position-3 {
	left: px2rem(20px);

	@include media-breakpoint-up(md) {
		left: px2rem(40px);
	}

}

.vlt-swiper-button--next.vlt-swiper-button--position-3 {
	right: px2rem(20px);

	@include media-breakpoint-up(md) {
		right: px2rem(40px);
	}

}

@include media-breakpoint-down(md) {

	.vlt-swiper-button--prev.vlt-swiper-button--position-3,
	.vlt-swiper-button--next.vlt-swiper-button--position-3 {
		display: none;
	}

}

.vlt-swiper-button {

	&--gray {
		color: var(--vlt-color-dark);
		background-color: var(--vlt-color-gray-light);

		&:hover {
			color: var(--vlt-accent-1);
			background-color: var(--vlt-color-gray-light);
		}

	}

	&--white {
		color: var(--vlt-color-dark);
		background-color: var(--vlt-color-white);

		&:hover {
			color: var(--vlt-accent-1);
			background-color: var(--vlt-color-white);
		}

	}

	&--dark {
		color: var(--vlt-color-gray);
		background-color: var(--vlt-color-dark-light);

		&:hover {
			color: var(--vlt-color-white);
			background-color: var(--vlt-color-dark-light);
		}

	}

	&--opacity {
		color: var(--vlt-color-gray);
		background-color: var(--vlt-color-gray-darker-0p4);

		&:hover {
			color: var(--vlt-color-white);
			background-color: var(--vlt-color-gray-darker-0p6);
		}

	}

}

/* PAGINATION
-------------------------------------------- */

.vlt-swiper-pagination {
	bottom: 0;

	.swiper-pagination-item {
		position: relative;
		display: flex;
		padding-bottom: px2rem(5px);
		color: inherit;
		text-align: left;
		text-decoration: none;
		white-space: nowrap;
		@include vlt_primary_bold_16;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 3px;
			background-color: currentColor;
			transform: scaleX(0);
			transform-origin: top left;
			will-change: transform;
		}

		&-active::after {
			animation: vlt_pagination_custom_active var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;
		}

	}

}