/*
 * CHIP.CSS
 * .jm-chip: a tappable tag holding a hidden checkbox (vibes in the wizard, the home filter). Ticked = filled.
 * Also a plain <button aria-pressed> (the shelf's box pills, 24 Oct): pressed = filled, the same look.
 * Moved here from wizard.css (19 Oct) once a second area used it.
 */

.jm-chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 var(--jm-space-2);
	border: 1px solid var(--jm-colour-line);
	border-radius: var(--jm-radius-button);
	font-size: var(--jm-text-s);
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: background var(--jm-motion-time), border-color var(--jm-motion-time);
}

.jm-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.jm-chip:hover { border-color: var(--jm-colour-flavour); }

button.jm-chip {
	background: none;
	color: var(--jm-colour-text);
	font: inherit;
	font-size: var(--jm-text-s);
}

.jm-chip:has(input:checked),
.jm-chip[aria-pressed="true"] {
	border-color: var(--jm-colour-flavour);
	background: var(--jm-colour-flavour);
	color: var(--jm-colour-button-text);
}

.jm-chip:has(input:disabled) { opacity: 0.4; cursor: default; }
.jm-chip:has(input:focus-visible),
button.jm-chip:focus-visible { outline: 2px solid var(--jm-colour-accent-3); outline-offset: 2px; }