_sliders.scss

/*! 
* Spry Sliders
*/
.slider {
	position: relative;

	&-slides {
		display           : flex;
		overflow-x        : scroll;
		scroll-behavior   : smooth;
		scroll-snap-type  : x mandatory;
		-ms-overflow-style: none;
		flex-wrap         : nowrap;

		&::-webkit-scrollbar {
			width  : 0;
			display: none;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
		}

		&::-webkit-scrollbar-thumb {
			background: transparent;
			border    : none;
		}

		>* {
			display          : flex;
			flex-direction   : column;
			position         : relative;
			flex             : 0 0 100%;
			width            : 100%;
			scroll-snap-align: start;
			justify-content  : center;
		}
	}
	&[data-snap] .slider-slides > * {
		scroll-snap-stop: always;
	}
	.grid img[loading="lazy"],
	.row img[loading="lazy"] {
		width: 100%;
		height: 100%;
	}
	.slider-prev,
	.slider-next {
		content  : '';
		z-index  : 1;
		position : absolute;
		top      : 50%;
		left     : 0;
		transform: translateY(-50%);
		transition: opacity .2s ease-in-out;
	}

	.slider-next {
		right: 0;
		left : auto;
	}
	&[data-position="start"] .slider-prev,
	&[data-position="end"] .slider-next {
		opacity: 0;
	}

	.slider-pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2%;
		& > * {
			cursor: pointer;
			border-radius: 50%;
			background-color: var(--spry-accent-color);
			width: 1em;
			height: 1em;
			transition: opacity .2s ease-in-out;
			opacity: .4;
			&:hover,
			&.active {
				opacity: 1;
			}
		}
	}
}