/**
 * Steuber Theme: group style "Slider" on the front end. In the editor the
 * slides stay below each other, so every slide can be edited.
 *
 * Without the script (assets/js/slider.js) the group itself scrolls sideways,
 * one slide per screen. The script moves the slides into a track and adds a
 * row of dots below it.
 */
.wp-block-group.is-style-slider,
.steuber-slider__track {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wp-block-group.is-style-slider::-webkit-scrollbar,
.steuber-slider__track::-webkit-scrollbar {
	display: none;
}

.wp-block-group.is-style-slider > :not(.steuber-slider__track, .steuber-slider__controls),
.steuber-slider__track > * {
	flex: 0 0 100%;
	box-sizing: border-box;
	min-width: 0;
	margin-block: 0;
	scroll-snap-align: start;
}

.wp-block-group.is-style-slider.is-ready {
	display: block;
	overflow: visible;
}

.steuber-slider__controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	justify-content: center;
	align-items: center;
	padding: var(--wp--preset--spacing--3) var(--wp--custom--gutter);
}

/* A dot: a small diamond inside a target that is large enough to hit. */
.steuber-slider__dot {
	display: grid;
	place-items: center;
	width: var(--wp--custom--slider--dot-target);
	height: var(--wp--custom--slider--dot-target);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: transparent;
	color: inherit;
	cursor: pointer;
}

.steuber-slider__dot::before {
	content: "";
	width: var(--wp--custom--slider--dot-size);
	height: var(--wp--custom--slider--dot-size);
	border: 2px solid currentcolor;
	transform: var(--wp--custom--diamond--transform);
}

.steuber-slider__dot[aria-current="true"]::before {
	background-color: currentcolor;
}

/* Slides are as tall as the tallest one; a cover adds no minimum of its own. */
.wp-block-group.is-style-slider .wp-block-cover {
	min-height: 0;
}