/*
 * Product configurator. Colors, spacing, type, radius, and borders come from
 * Automatic.css. Reset and Clear use the btn--* classes.
 * Plain CSS only. This file is not compiled by Etch.
 */

.spahr-pm {
	--disabled-opacity: 0.4;
	--_shadow: 0 1px 2px rgb(15 23 42 / 0.06);
    --_selected-shadow: 0 0 0 1px rgb(111 135 255 / 0.14), 0 10px 24px rgb(111 135 255 / 0.12);
	display: grid;
	gap: var(--space-s);
	color: var(--text-dark);
}

.spahr-pm__fields {
	display: grid;
	gap: var(--space-s);
}

.spahr-pm__pending,
.spahr-pm__empty {
	color: var(--text-dark-muted);
}

.spahr-pm__reset {
	justify-self: start;
}

.spahr-pm__reset:disabled {
	cursor: not-allowed;
	opacity: var(--disabled-opacity);
}

.spahr-pm__clear {
	--btn-min-width: 0;
}

.spahr-pm__clear[hidden] {
	display: none;
}

.spahr-pm__field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-xs);
	align-items: center;
	border: 0;
	padding: 0;
	min-inline-size: 0;
}

.spahr-pm__label {
	margin-block-end: var(--space-s); 
}

.spahr-pm__options {
	grid-column: 1 / -1;
	--_options-max: calc(var(--space-xxl) * 6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	max-block-size: var(--_options-max);
	overflow: auto;
	padding-inline-start: var(--space-xs);
}

.spahr-pm__option {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: var(--btn-padding-block);
	padding-inline: var(--space-xs);
	border: var(--border);
	border-radius: var(--radius);
	box-shadow: var(--_shadow);
	background-color: var(--bg-ultra-light);
	color: var(--text-dark);
	cursor: pointer;
	transition: var(--transition);
	margin-block-end: 0 !important; 
}

.spahr-pm__option:hover {
	background-color: var(--bg-light);
}

.spahr-pm__option:has(input:checked) {
	background-color: var(--primary-ultra-light);
	border-color: var(--primary-light);
	box-shadow: var(--_selected-shadow);
}

.spahr-pm__option:has(input:focus-visible) {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

.spahr-pm__option:has(input:disabled) {
	background-color: var(--bg-ultra-light);
	color: var(--text-dark-muted);
	cursor: not-allowed;
	opacity: var(--disabled-opacity);
}

.spahr-pm__option input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: inherit;
}