/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

:root {
	--controls-color: #fff;
	--controls-opacity: 0.35;
	--controls-hover-opacity: 0.9;
	--controls-transition: opacity 0.5s ease-in-out;
}

.wp-block-la-slider {
	position: relative;
	overflow: clip;
}

.wp-block-la-slider .carousel {
	position: absolute;
	left: -100%;
	height: 100%;
	width: 300%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-auto-columns: 100%;
	cursor: grab;
}

.wp-block-la-slider .wp-block-la-slide {
	overflow: hidden;
	grid-column: 2;
	grid-row: 1;
	user-select: none;
}

.wp-block-la-slider .wp-block-la-slide:not(.visible):not(.prev):not(.next) {
	display: none;
}

.wp-block-la-slider .wp-block-la-slide.visible {
	z-index: 1;
}

.wp-block-la-slide {
	margin: 0 !important;
}

/************************
* SLIDE MODI
*************************/
/* NONE */

.wp-block-la-slider .carousel.none .wp-block-la-slide.visible {
	grid-column: 2;
}

/* SLIDE */
.wp-block-la-slider .carousel.slide.left {
	left: -200%;
}

.wp-block-la-slider .carousel.slide.right {
	left: 0%;
}

.wp-block-la-slider .carousel.slide .wp-block-la-slide.visible {
	grid-column: 2;
}

.wp-block-la-slider .carousel.slide .wp-block-la-slide.prev {
	grid-column: 1;
}

.wp-block-la-slider .carousel.slide .wp-block-la-slide.next {
	grid-column: 3;
}


/* FADE */
.wp-block-la-slider .carousel.fade.left .wp-block-la-slide.next,
.wp-block-la-slider .carousel.fade.right .wp-block-la-slide.prev,
.wp-block-la-slider .carousel.fade .wp-block-la-slide.visible {
	transition: inherit;
	opacity: 1;
}

.wp-block-la-slider .carousel.fade.left .wp-block-la-slide.visible,
.wp-block-la-slider .carousel.fade.right .wp-block-la-slide.visible,
.wp-block-la-slider .carousel.fade .wp-block-la-slide.prev,
.wp-block-la-slider .carousel.fade .wp-block-la-slide.next {
	transition: inherit;
	opacity: 0;
}


/****************
** CONTROLS
*****************/

/* clear button styles */
.wp-block-la-slider .la-arrow,
.wp-block-la-slider .la-button {
	appearance: none;
	border: none;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	outline: none;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ARROWS */
.wp-block-la-slider .la-arrow {
	cursor: pointer;
	position: absolute;
	top: 50%;
	background-size: contain;
	background-color: #fff;
	border-radius: 50%;
	transform: translateY(-50%);
	opacity: var(--controls-opacity);
	transition: var(--controls-transition);
	z-index: 2;
}

.wp-block-la-slider .la-arrow.prev {
	left: 1rem;
}

.wp-block-la-slider .la-arrow.next {
	right: 1rem;
}

/* DOTS */
.wp-block-la-slider .dots {
	position: absolute;
	display: flex;
	left: 50%;
	bottom: 1rem;
	transform: translateX(-50%);
	gap: 0.5rem;
	z-index: 2;
}

.wp-block-la-slider .dots .la-dot {
	cursor: pointer;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: 1px solid #00000080;
	background-color: var(--controls-color);
	opacity: var(--controls-opacity);
	transition: var(--controls-transition);
}

.wp-block-la-slider .dots .la-dot.active {
	opacity: var(--controls-hover-opacity);
}

/* PAUSE/PLAY BUTTON */
.wp-block-la-slider .la-button {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: #fff;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	opacity: 0;
	transition: var(--controls-transition);
	z-index: 2;
}

.wp-block-la-slider .la-button.pause .play,
.wp-block-la-slider .la-button.play .pause {
	display: none;
}

.wp-block-la-slider .la-button.play {
	opacity: var(--controls-opacity);
}

/* SPINNER */
.wp-block-la-slider .la-spinner {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 1.25rem;
	height: 1.25rem;
	opacity: var(--controls-opacity);
	z-index: 2;
}

/* HOVER */
@media (hover: hover) {

	.wp-block-la-slider:hover .la-button {
		opacity: var(--controls-opacity);
	}

	.wp-block-la-slider .la-arrow:hover,
	.wp-block-la-slider .dots .la-dot:hover,
	.wp-block-la-slider .la-button:hover {
		opacity: var(--controls-hover-opacity);
	}
}


/* MASKS */
.wp-block-la-slider .mask {
	width: 100%;
	height: 100%;
	mask-repeat: repeat-x;
    mask-mode: alpha;
	mask-composite: exclude;
}