/*
 * Slider.
 *
 * A card grid marked with data-slider becomes a track: the script swaps the
 * grid for a row, adds the dots and the arrows, and the same rules serve any
 * block that carries the mark. Without the script the grid simply keeps its
 * rows.
 */

/* The track may well be a list, and the script takes the grid class off it as
   it builds the row, so the indent a list carries is dropped here too. */
:is([class*="wp-block-ukrp-"], .ukrp) .slider__track {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

/* The bar is replaced by the dots, so it is taken out of the picture. */
:is([class*="wp-block-ukrp-"], .ukrp) .slider__track::-webkit-scrollbar {
	display: none;
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider__track.is-scrollable {
	cursor: grab;
}

/* While a card is being dragged the track stops snapping and nothing on the
   page gets selected under the pointer. */
:is([class*="wp-block-ukrp-"], .ukrp) .slider__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider__slide {
	flex: 0 0 calc((100% - 60px) / 4);
	margin: 0;
	scroll-snap-align: start;
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider[data-per-view="3"] .slider__slide {
	flex-basis: calc((100% - 40px) / 3);
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider[data-per-view="2"] .slider__slide {
	flex-basis: calc((100% - 20px) / 2);
}

/* Nothing to scroll means nothing to steer. */
:is([class*="wp-block-ukrp-"], .ukrp) .slider.is-static .slider__footer {
	display: none;
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider__dots {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* A track with many stops shows a window of dots rather than all of them:
   a row of twenty would push the arrows off a phone. */
:is([class*="wp-block-ukrp-"], .ukrp) .slider__dot.is-hidden {
	display: none;
}

/* The dot at the edge of the window stands for the stops behind it. */
:is([class*="wp-block-ukrp-"], .ukrp) .slider__dot.is-edge {
	width: 6px;
	height: 6px;
	opacity: .7;
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	background: #b7c0ba;
	cursor: pointer;
	transition: width .18s ease, background .18s ease;
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider__dot:hover {
	background: var(--color-subtle);
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider__dot.is-active {
	width: 28px;
	background: var(--color-accent);
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider__controls {
	display: flex;
	gap: 8px;
}

:is([class*="wp-block-ukrp-"], .ukrp) .slider__controls .btn-icon {
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
}

:is([class*="wp-block-ukrp-"], .ukrp) .btn[disabled] {
	opacity: .35;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	:is([class*="wp-block-ukrp-"], .ukrp) .slider__dot {
		transition: none;
	}
}

/* The rules above carry an attribute, so the narrow ones match it to stay
   ahead. */
@media (max-width: 1100px) {
	:is([class*="wp-block-ukrp-"], .ukrp) .slider[data-per-view] .slider__slide {
		flex-basis: calc((100% - 20px) / 2);
	}
}

@media (max-width: 680px) {
	:is([class*="wp-block-ukrp-"], .ukrp) .slider[data-per-view] .slider__slide {
		flex-basis: 84%;
	}
}