/*
 * Chips — used for category filters (Travel Trailers / Fifth Wheels / …).
 * Two states: default (outlined) and active (filled dark).
 */

.liv-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--liv-ink-700);
	background: transparent;
	border: 1px solid var(--liv-ink-700);
	border-radius: var(--r-pill);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--liv-transition), color var(--liv-transition), border-color var(--liv-transition);
}
.liv-chip:hover,
.liv-chip:focus-visible {
	background: var(--liv-ink-700);
	color: var(--liv-paper);
}
.liv-chip[aria-current="page"],
.liv-chip--active {
	background: var(--liv-ink-900);
	color: var(--liv-paper);
	border-color: var(--liv-ink-900);
}

.liv-chip-row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-block: 0.25rem;
}
.liv-chip-row > .liv-chip { scroll-snap-align: start; flex: 0 0 auto; }

/* Hide scrollbar on the horizontal chip row. */
.liv-chip-row::-webkit-scrollbar { display: none; }
.liv-chip-row { scrollbar-width: none; }