.slider {
	--_slides: 3;
	--_gap: 1rem;
	position: relative;
	overflow-x: hidden;
}

.slider .slide.slick-slide {
	padding: 0;
}

.slider > .acf-innerblocks-container {
	margin-inline: calc(var(--_gap) * -1);
}

/**
SLICK
 */
.slider .slick-arrow {
	--_offset: 0.75em;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	border: none;
	background: none;
	box-shadow: none;
	border-radius: 0;
	height: 1.2em;
	width: 1.2em;
	display: grid;
	place-items: center;
	cursor: pointer;
	font-size: 2.25rem;
	color: var(--wp--preset--color--primary);
}

.slider .slick-dots {
	display: flex;
	padding-left: 0 !important;
	padding-top: 0 !important;
	justify-content: center;
	gap: 0.5rem;
}

.slider .slick-dots li {
	padding: 0 !important;
	list-style-type: none;
	cursor: pointer;
}


.slider .slick-dots li button {
	--_dot-size: 1rem;
	border-radius: 100%;
	padding: 0;
	background-color: #dadada;
	color: transparent;
	border: none;
	width: .75rem;
	height: .75rem;
	cursor: pointer;
}

.slider .slick-dots .slick-active button {
	background-color: var(--wp--preset--color--primary);
}


@media screen and (max-width: 860px) {
	.slider .slick-dots {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
	}
}

.slider .slick-arrow:hover,
.slider .slick-arrow:focus-visible {
	color: var(--wp--preset--color--primary);
}

.slider .slick-arrow.slick-prev {
	left: calc(var(--_offset) * -1);
	right: unset;
}

.slider .slick-arrow.slick-next {
	left: unset;
	right: calc(var(--_offset) * -1);
}

@media (max-width: 1200px) {
	.slider .slick-arrow {
		--_offset: -1.25rem;
		font-size: 2rem;
	}
}

.slider .slick-slide {
	padding: 20px;
}

/**
EDITOR UI
 */
.block-editor-page .slider {
	overflow-y: scroll;
	padding-block: 2rem;
}

.block-editor-page .slider > .acf-innerblocks-container {
	min-width: 100%;
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
}

.block-editor-page .slider > .acf-innerblocks-container > * {
	width: calc(100% / var(--_slides));
	flex-shrink: 0;
}

.block-editor-page .slider > .acf-innerblocks-container > .block-list-appender {
	position: absolute;
	bottom: 0;
	right: 0;
	width: fit-content;
	transform: translateY(75%);
}