.cla-blocks-slider-container {
	--cla-blocks--navigation--button-size: calc(var(--cla--spacing--1) + var(--cla--spacing--1) + var(--cla--font-size--100));
	--cla-blocks--slide-pickers--background: var(--cla--color--csu-green);
	--cla-blocks--slide-pickers--background-state: var(--cla--color--secondary);
	--cla-blocks--slide-picker--border: none;
	--cla-blocks--slide-picker--border-contrast: none;
	--cla-blocks--slide-picker--border-state: var(--cla--linework--width) var(--cla--linework--style) var(--cla--color--linework);
	--cla-blocks--slide-picker--background: var(--cla--color--accent);
	--cla-blocks--slide-picker--background-contrast: var(--cla--color--white);
	--cla-blocks--slide-picker--background-state: var(--cla--color--lovers-lane);
	container-name: cla-blocks-slider-container;
	container-type: inline-size;
	position: relative;
}

.cla-blocks-slider {
	display: flex;
	flex-direction: column-reverse;
}

.cla-blocks-slider .cla-blocks-slider__controls {
	display: flex;
	width: 100%;
	border-top: var(--cla--spacing--1-2) solid var(--cla--color--secondary);
	flex-direction: column-reverse;
	align-items: stretch;
}
.cla-blocks-slider .cla-blocks-slider__slide-pickers-container {
	border-radius: 0;
	padding-left: var(--cla--spacing--1);
	padding-right: var(--cla--spacing--1);
	align-items: center;
	gap: var(--wcag--operable--input-modalities--minimum-target-size);
	height: var(--cla-blocks--navigation--button-size);
	height: round(up, var(--cla-blocks--navigation--button-size), 1px);
	width: 100%;
	min-height: var(--wcag--operable--input-modalities--minimum-target-size);
	justify-content: center;
}
.cla-blocks-slider .cla-blocks-slider__slide-picker:focus,
.cla-blocks-slider .cla-blocks-slider__slide-picker:hover {
	cursor: pointer;
}
.cla-blocks-slider .cla-blocks-slider__navigation {
	align-items: stretch;
	gap: var(--cla--linework--width);
	background-color: var(--cla--color--linework);
}
.cla-blocks-slider .cla-blocks-slider__navigation button:focus,
.cla-blocks-slider .cla-blocks-slider__navigation button:hover {
	cursor: pointer;
	background-color: var(--cla--color--lovers-lane);
}
.cla-blocks-slider .cla-blocks-slider__rotation-button,
.cla-blocks-slider .cla-blocks-slider__previous-button,
.cla-blocks-slider .cla-blocks-slider__next-button {
	display: block;
	width: auto;
	height: var(--cla-blocks--navigation--button-size);
	height: round(up, var(--cla-blocks--navigation--button-size), 1px);
	flex-grow: 1;
	aspect-ratio: 1;
	background-color: var(--cla--color--accent);
	background-image: url("/wp-content/themes/libarts-2024-theme/assets/css/blocks/../../images/brushstroke-texture--20-percent.svg");
	background-repeat: no-repeat;
	background-size: 200%;
	background-position: 20% 25%;
}
.cla-blocks-slider .cla-blocks-slider__rotation-button::before,
.cla-blocks-slider .cla-blocks-slider__previous-button::before,
.cla-blocks-slider .cla-blocks-slider__next-button::before {
	content: "";
	position:absolute;
	top: 50%;
	left: 50%;
	border-radius: var(--cla--spacing--2);
	display: block;
	width: calc(var(--cla--spacing--1) * 1.75);
	height: calc(var(--cla--spacing--1) * 1.75);
	background: var(--cla--color--csu-green);
	transform: translateX(-50%) translateY(-50%);
}
.cla-blocks-slider .cla-blocks-slider__rotation-button::after,
.cla-blocks-slider .cla-blocks-slider__previous-button::after,
.cla-blocks-slider .cla-blocks-slider__next-button::after {
	filter: invert(1) hue-rotate(0) saturate(1);
}

.cla-blocks-slider .cla-blocks-slider__slides {
	position: relative;
	z-index: 0;
}



@container cla-blocks-slider-container (min-width: 480px) {
	.cla-blocks-slider {
		align-items: flex-end;
	}

	.cla-blocks-slider .cla-blocks-slider__controls {
		position: sticky;
		z-index: 1;
		bottom: 0;
		border-top: var(--cla--spacing--1-2) solid var(--cla--color--secondary);
		display: flex;
		width: fit-content;
		flex-direction: row-reverse;
		align-items: stretch;
	}
	.cla-blocks-slider .cla-blocks-slider__slide-pickers-container {
		gap: var(--cla--spacing--1-2);
		width: fit-content;
	}
	.cla-blocks-slider .cla-blocks-slider__rotation-button,
	.cla-blocks-slider .cla-blocks-slider__previous-button,
	.cla-blocks-slider .cla-blocks-slider__next-button {
		flex-grow: 0;
	}

	.cla-blocks-slider .cla-blocks-slider__slides {
		margin-bottom: calc((var(--cla--spacing--2) + var(--cla--font-size--100) + var(--cla--spacing--1-2)) * -1);
	}
}