/* WP3 — control contract: paint, box, fields. Specificities must not be lowered. */

/* (0,1,1): above theme `button {}` / `a {}` element rules. */
.maxer-idx-root :is(button, a):where(:not(.gm-style *, .leaflet-container *)) {
	background-color: var(--maxer-ctl-bg, transparent);
	color: var(--maxer-ctl-fg, inherit);
	border-color: var(--maxer-ctl-bc, transparent);
	text-decoration: var(--maxer-link-deco, none);
}

/* (0,3,1): above Astra `button:hover` (0,1,1) and `a:hover` (0,1,1). */
.maxer-idx-root
	:is(button, a):is(:hover, :focus, :active):not(:disabled):where(
		:not(.gm-style *, .leaflet-container *)
	) {
	background-color: var(
		--maxer-ctl-bg-hover,
		var(--maxer-ctl-bg, transparent)
	);
	color: var(--maxer-ctl-fg-hover, var(--maxer-ctl-fg, inherit));
	border-color: var(--maxer-ctl-bc-hover, var(--maxer-ctl-bc, transparent));
	text-decoration: var(--maxer-link-deco-hover, var(--maxer-link-deco, none));
	outline: none;
}

.maxer-idx-root :is(button, a):focus-visible {
	outline: 2px solid var(--maxer-ring, var(--maxer-primary));
	outline-offset: 2px;
}

.maxer-idx-root button:disabled {
	opacity: var(--maxer-ctl-disabled-opacity, 0.55);
	cursor: not-allowed;
}

/* (0,2,1): above Astra `button {}` (0,0,1) and `input[type=submit]` (0,1,1). */
.maxer-idx-root
	:is(
		button,
		input[type="button"],
		input[type="submit"],
		a.maxer-as-button
	):where(:not(.gm-style *, .leaflet-container *)) {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	box-sizing: border-box;
	border-width: var(--maxer-ctl-bw, 0);
	border-style: solid;
	border-radius: var(--maxer-ctl-radius, 0);
	padding: var(--maxer-ctl-pad, 0);
	min-height: 0;
	height: var(--maxer-ctl-h, auto);
	font-family: inherit;
	font-size: var(--maxer-ctl-fs, inherit);
	font-weight: var(--maxer-ctl-fw, inherit);
	line-height: var(--maxer-ctl-lh, 1.2);
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}

/* (0,2,1): `input:not(…)` is (0,1,1) + root class. */
.maxer-idx-root
	:is(
		input:not(
			[type="checkbox"],
			[type="radio"],
			[type="range"],
			[type="file"],
			[type="hidden"],
			[type="button"],
			[type="submit"]
		),
		select,
		textarea
	) {
	margin: 0;
	box-sizing: border-box;
	background-color: var(--maxer-field-bg, var(--maxer-surface));
	color: var(--maxer-field-fg, var(--maxer-ink));
	border: var(--maxer-field-bw, 1px) solid
		var(--maxer-field-bc, var(--maxer-line));
	border-radius: var(--maxer-field-radius, var(--maxer-radius-sm));
	padding: var(--maxer-field-pad, 0 12px);
	min-height: 0;
	height: var(--maxer-field-h, 40px);
	font-family: inherit;
	font-size: var(--maxer-field-fs, 16px);
	line-height: var(--maxer-field-lh, 1.2);
	box-shadow: var(--maxer-field-ring, none);
	outline: none;
}

.maxer-idx-root
	:is(
		input:not(
			[type="checkbox"],
			[type="radio"],
			[type="range"],
			[type="file"],
			[type="hidden"],
			[type="button"],
			[type="submit"]
		),
		textarea
	) {
	appearance: none;
	-webkit-appearance: none;
}

/* (0,0,1): defaults a component can still override at (0,1,0). */
:where(.maxer-idx-root) textarea {
	--maxer-field-h: auto;
	--maxer-field-pad: 10px 12px;
}

/* (0,3,1): above Astra `input[type="text"]:focus` (0,2,1) and its dotted-border rule. */
.maxer-idx-root
	:is(
		input:not(
			[type="checkbox"],
			[type="radio"],
			[type="range"],
			[type="file"],
			[type="hidden"],
			[type="button"],
			[type="submit"]
		),
		select,
		textarea
	):is(:hover, :focus, :active) {
	background-color: var(
		--maxer-field-bg-focus,
		var(--maxer-field-bg, var(--maxer-surface))
	);
	border-style: solid;
	border-width: var(--maxer-field-bw, 1px);
	border-color: var(--maxer-field-bc-focus, var(--maxer-primary));
	box-shadow: var(
		--maxer-field-ring-focus,
		0 0 0 2px var(--maxer-primary-line)
	);
	outline: none;
}