.is-cla-blocks-slider {
	--cla-blocks--slide-pickers--border: none;
	--cla-blocks--slide-pickers--background: rgba(0, 0, 0, 0.6);
	--cla-blocks--slide-pickers--background-state: var(--cla-blocks--color--accent);
	--cla-blocks--slide-picker--border: 2px solid #fff;
	--cla-blocks--slide-picker--border-contrast: 2px solid #000;
	--cla-blocks--slide-picker--border-state: 2px solid var(--cla-blocks--color--accent);
	--cla-blocks--slide-picker--background: transparent;
	--cla-blocks--slide-picker--background-contrast: #fff;
	--cla-blocks--slide-picker--background-state: var(--cla-blocks--color--accent);
}
.is-cla-blocks-slider .hidden {
	display: none;
}
.cla-blocks-slider__slides,
.editor-styles-wrapper .cla-blocks-slider__slides > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"slide";
	width: 100%;
}

.cla-blocks-slider__navigation {
	display: flex;
	flex-direction: row;
}
.cla-blocks-slider__next-button {
	order: 3;
}
.cla-blocks-slider__rotation-button {
	order: 2;
}
.cla-blocks-slider__previous-button {
	order: 1;
}
.cla-blocks-slider__rotation-button,
.cla-blocks-slider__previous-button,
.cla-blocks-slider__next-button {
	position: relative;
	border: none;
	padding: 0;
	display: block;
	width: var(--cla-blocks--spacing--gap);
	height: var(--cla-blocks--spacing--gap);
}
.cla-blocks-slider__rotation-button::after,
.cla-blocks-slider__previous-button::after,
.cla-blocks-slider__next-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
}
.cla-blocks-slider__rotation-button.pause::after {
	background-image: url('../icons/play.svg');
}
.cla-blocks-slider__rotation-button.play::after {
	background-image: url('../icons/pause.svg');
}
.cla-blocks-slider__previous-button::after {
	background-image: url('../icons/arrow-left.svg');
}
.cla-blocks-slider__next-button::after {
	background-image: url('../icons/arrow-right.svg');
}

.cla-blocks-slider__slide-pickers-container {
	border: var(--cla-blocks--slide-pickers--border);
	border-radius: calc(var(--cla-blocks--spacing--gap) * 0.5);
	padding: calc(var(--cla-blocks--spacing--gap) * 0.25);
	display: flex;
	width: fit-content;
	height: fit-content;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--cla-blocks--spacing--gap);
	background-color: var(--cla-blocks--slide-pickers--background);
}
.cla-blocks-slider__slide-pickers-container.focus {
	background-color: var(--cla-blocks--slide-pickers--background-state);
}
.cla-blocks-slider__slide-picker {
	border: var(--cla-blocks--slide-picker--border);
	padding: 0;
	border-radius: calc(var(--cla-blocks--spacing--gap) * 2);
	display: block;
	width: calc(var(--cla-blocks--spacing--gap) * 0.65);
	height: calc(var(--cla-blocks--spacing--gap) * 0.65);
	background: var(--cla-blocks--slide-picker--background);
}
.cla-blocks-slider__slide-picker[aria-selected="true"] {
	border: var(--cla-blocks--slide-picker--border-contrast);
	background-color: var(--cla-blocks--slide-picker--background-contrast);
}
.cla-blocks-slider__slide-picker:hover {
	background-color: var(--cla-blocks--slide-picker--background-state);
}
.cla-blocks-slider__slide-pickers-container.focus .cla-blocks-slider__slide-picker:focus,
.cla-blocks-slider__slide-pickers-container.focus .cla-blocks-slider__slide-picker:hover {
	border: var(--cla-blocks--slide-picker--border-state);
	background-color: var(--cla-blocks--slide-picker--background-contrast);
}

.cla-blocks-slider-slide-container {
	grid-area: slide;
	animation-name: cla-blocks-slider-fade-out;
	animation-duration: 300ms;
	animation-fill-mode: both;
}
.cla-blocks-slider-slide-container.active {
	z-index: 1;
	animation-name: cla-blocks-slider-fade-in;
}
.editor-styles-wrapper .cla-blocks-slider-slide-container {
	animation-duration: 0ms;
}

@keyframes cla-blocks-slider-fade-in {
	0% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes cla-blocks-slider-fade-out {
	0% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}