/*
 * Shared slider chrome. The JS toggles [data-sk-active] and nothing else, so
 * every transition is described here.
 */

[data-sk-slider] {
	position: relative;
}

/*
 * How a slide enters and leaves is left to each block. The testimonials swap
 * outright, while the hero stacks its slides and cross-fades the photography,
 * so there is nothing shared to describe here.
 */

.slider-arrow {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid color-mix(in srgb, var(--sk-gray) 45%, #fff);
	background: var(--sk-white);
	color: var(--sk-black);
	transition: border-color var(--sk-transition), color var(--sk-transition);

	&:hover {
		border-color: var(--sk-accent);
		color: var(--sk-accent);
	}
}

.slider-progress {
	width: 4rem;
	height: 3px;
	background: color-mix(in srgb, var(--sk-gray) 30%, #fff);
}

.slider-progress__bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--sk-accent);
	transition: width var(--sk-transition);
}