/*
-----------------
 Form Elements
-----------------
*/
@layer bs-core {
	:root {
		--fieldset-rg: 1ch;
		--input-bdrs: .25em;
		--input-bdw: 1px;
		--input-bs: calc(1.2em + (2 * var(--input-pb)) + (2 * var(--input-bdw))); /* (1em * 1.2) (line-height) */
		--input-pb: .66em;
		--input-pi: 1.25ch;
		--input-range-h: .5em;
		--input-thumb-sz: 1.5rem;
		--label-rg: .25em;
	}
	:where(button, .ui-button, fieldset, input, select, textarea), [type=file]::file-selector-button {
		border: var(--input-bdw) solid var(--ButtonBorder);
		border-radius: var(--input-bdrs);
		&::placeholder { color: var(--GrayText); }
	}
	:where(button, .ui-button), [type=file]::file-selector-button {
		--button-bg--hover: color-mix(in srgb, var(--button-bg, var(--ButtonFace)), var(--button-hover-mix, var(--CanvasText) 25%));
		--button-bxsh--hover: color-mix(in srgb, var(--button-bg, var(--ButtonFace)), transparent 75%) 0px 0px 0px .16em;
		--button-c--hover: var(--button-c, inherit);
		align-items: center;
		background: var(--button-bg, var(--ButtonFace));
		border-color: var(--button-bdc, transparent);
		color: var(--button-c, inherit);
		display: inline-grid;
		font-weight: 500;
		gap: 1ch;
		grid-auto-flow: column;
		line-height: normal;
		padding: var(--button-p, 1ch 2.5ch);
		place-content: center;
		text-decoration: none;
		transition: all .2s ease-in-out;
		user-select: none;
		&:where([disabled], .--disabled) {
			cursor: not-allowed;
			opacity: .33;
		}
		&:focus-visible {
			outline-color: var(--button-bg, var(--ButtonFace));
			outline-offset: 0.3em;
		}
		&:not([disabled],.--disabled):is(:focus-visible, :hover),
		&:has(input:focus-visible) {
			background: var(--button-bg--hover);
			box-shadow: var(--button-bxsh--hover);
			color: var(--button-c--hover);
		}
		&.--icon {
			--button-p: 1ch;
			align-content: baseline;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			grid-template-columns: 1fr;
			height: auto;
		}
		&.--outline {
			&:not(:focus-visible, :hover) {
				--button-bdc: currentColor;
				background: #0000;
			}
			&.--icon { border-width: 2px; }
		}
		&.--rounded { border-radius: 3em; }
		&.--end { justify-self: end; }
		&.--start { justify-self: start; }
		&.--text { --button-bg: transparent; --button-c: var(--CanvasText);}
		&.--toggle { --button-p: 0; }
		&.--transparent { background: transparent; }
	}
	:where([type=submit]), input[type=file]::file-selector-button {
		--button-bg: var(--AccentColor);
		--button-c: var(--AccentColorText);
		&.--outline {
			--button-bg: #0000;
			--button-c: var(--AccentColor);
			--button-bg--hover: var(--AccentColor);
			--button-c--hover: var(--AccentColorText);
			outline-color: var(--AccentColor);
		}
	}
	:where(button, .ui-button, input, select, textarea) {
		font-family: var(--ff-form);
		font-size: var(--input-fs, 1rem);
	}
	:where(fieldset) {
		display: grid;
		margin: 0;
		row-gap: var(--fieldset-rg);
	}
	:where(input:not([type=checkbox],[type=file],[type=radio],[type=range]), option, select:not([size]), textarea) {
		block-size: var(--input-bs);
		padding: var(--input-pb) var(--input-pi);
	}
	:where(input:not([type=checkbox],[type=color],[type=radio],[type=range]), option:checked, select, textarea) {
		background-image: var(--icon);
		background-position: calc(100% - 1.25ch) center;
		background-repeat: no-repeat;
		background-size: var(--icon-size, 1.25em);
		width: 100%;
		[dir=rtl] & { background-position: 1.25ch center; }
	}

	/* CHECKBOX / RADIO V.2.0 */
	:where([type=checkbox], [type=radio]) {
		--icon: url('/assets/svg/check.svg');
		--input-bdw: calc(1em * (4/3) / 13.333333);
		appearance: none;
		background: var(--input-check-bg, var(--Canvas));
		border-color: var(--input-check-bdc, var(--ButtonBorder));
		border-radius: var(--input-check-bdrs, .2em);
		font-size: 1em;
		height: 1em;
		margin: var(--input-check-m, 0); /* Default browser-checkbox margin: .1875em .1875em .1875em .25em */
		position: relative;
		width: 1em;
		&::after {
			background: var(--input-check-bga, transparent);
			content: "";
			inset: 0;
			mask: var(--icon) no-repeat center / var(--input-check-mask-size, contain);
			position: absolute;
		}
		&:checked {
			border-color: transparent;
			--input-check-bg: var(--input-check-bg--checked, var(--AccentColor));
			--input-check-bga: var(--input-check-bga--checked, #FFF);
		}
		&:indeterminate {
			--icon: url('/assets/svg/minus-white.svg');
			--input-check-bga: var(--input-check-bdc, var(--ButtonBorder));
			/* --input-check-mask-size: 75%; */
		}

		/* Modifiers */
		&.--cross { --icon: url('/assets/svg/cross.svg'); }
		&.--round {
			--input-check-bdrs: 50%;
			--input-check-mask-size: 85%;
		}
		&.--square { --input-check-bdrs: 0; }

		/* Color-modifiers */
		&[class*="bg-"] {
			--input-check-bdc: color-mix(in srgb, var(--_bg) 60%, var(--CanvasText) 20%);
			&[class*="--light"]:checked { --input-check-bga: var(--_bg); }
		}
		&[class*="bg-gray"] { --input-check-bga--checked: var(--CanvasText); }

		@media (hover: hover) {
			&:checked:hover {
				--input-check-bg: var(--input-check-bg--checked-hover, color-mix(in srgb, var(--AccentColor) 60%, var(--CanvasText) 40%));
			}
			&:not(:checked):hover {
				--input-check-bdc: var(--input-check-bdc--hover, color-mix(in srgb, var(--GrayText) 60%, var(--CanvasText) 40%));
				&[role=switch] {
					--input-check-bg: var(--GrayText);
				}
			}
		}
	}
	:where([type=radio]) {
		--input-check-bdrs: 50%;
		--input-check-bga--checked: var(--input-check-bg);
		&:checked { box-shadow: inset 0 0 0 .125em var(--Canvas); }
		&::after {
			clip-path: inset(.125em round var(--input-check-bdrs));
		}
	}
	:where([type=checkbox]) {
		&[role=switch] {
			--icon: none;
			--input-check-bdrs: 1em;
			--input-check-bg: #d1d1d1;
			--input-check-bga: Field;
			border: 0;
			display: grid;
			padding: .125em;
			place-content: center start;
			width: 1.8em;
			&::after {
				border-radius: 50%;
				height: .75em;
				inset: unset;
				position: static;
				width: .75em;
			}
			&:checked {
				--input-check-bg: var(--input-check-bg--checked, var(--AccentColor));
				justify-content: end;
			}
		}
	}

	:where([type=color]) {
		padding: 0;
		width: 100%;
		&::-webkit-color-swatch,
		&::-webkit-color-swatch-wrapper {
			border: 0;
			border-radius: inherit;
			padding: 0;
			width: 100%;
		}
	}
	:where([type=file]) {
		border: 0;
		&::file-selector-button { margin-inline-end: 1.5ch; }
	}
	:where([type=range]) {
		--_x: calc(100% * (var(--value) - var(--min, 0)) / (var(--max, 100) - var(--min, 0)));
		background-color: var(--ButtonFace);
		border: 0;
		border-radius: var(--input-range-h);
		background-image: linear-gradient(to var(--_dir, right), var(--AccentColor) var(--_x, 0), var(--ButtonFace) 0 var(--_x));
		height: var(--input-range-h);
		margin-block: calc((var(--input-thumb-sz) - var(--input-range-h)) / 2);
		&::-webkit-slider-thumb {
			appearance: none;
			background: var(--AccentColor);
			border-radius: 50%;
			box-shadow: none;
			height: var(--input-thumb-sz);
			width: var(--input-thumb-sz);
		}
		&::-moz-range-thumb {
			appearance: none;
			background: var(--AccentColor);
			border-radius: 50%;
			border: 0;
			height: var(--input-thumb-sz);
			width: var(--input-thumb-sz);
		}
	}
	:where([type=range], option, select) { appearance: none; }
	:where([type=search]) {
		background-color: inherit;
		&::-webkit-search-cancel-button {
			--icon: url('/assets/svg/reset.svg');
			background-color: currentColor;
			display: block;
			height: 1em;
			mask-image: var(--icon);
			width: 1em;
			-webkit-appearance: none;
			-webkit-mask-image: var(--icon);
		}
		&[autocomplete="off"]::-webkit-contacts-auto-fill-button {
			visibility: hidden;
		}
	}
	[list]::-webkit-list-button,
	[list]::-webkit-calendar-picker-indicator {
		display: none !important;
		opacity: 0 !important;
	}
	:where(label, legend) {
		font-size: var(--label-fs, smaller);
		font-weight: 500;
		& abbr { /* Required */
			color: var(--ColorError);
			margin-inline: .25ch 1ch;
			text-decoration: none;
		}
		& small { /* Hints */
			color: var(--GrayText);
			font-weight: 400;
		}
	}
	:where(label:not(:has([type=checkbox], [type=radio]))) {
		align-content: start;
		display: grid;
		row-gap: var(--label-rg);
	}
	:where(label:has([type=checkbox], [type=radio])) {
		align-items: center;
		column-gap: 1ch;
		display: grid;
		grid-template-columns: min-content 1fr;
	}
	:where(label:has(input[disabled])) { color: var(--GrayText); }
	:where(label[data-output], label[style*="--output"]) {
		position: relative;
		&::after {
			content: attr(data-output);
			font-size: small;
			inset-inline: auto 0;
			position: absolute;
		}
	}
	:where(label[style*="--output"])::after {
		counter-reset: output var(--output);
		content: counter(output);
	}
	:where(legend) { white-space: nowrap; }
	:where(option) {
		&:is(:checked, [selected]) {
			--icon: url('/assets/svg/check.svg');
			background-color: var(--CanvasGray);
		}
		&:not(:last-of-type) {
			border-block-end: var(--input-bdw) solid var(--ButtonBorder);
		}
	}
	:where(select) {
		background-color: transparent;
		color: inherit;
		overflow: hidden;
		&[multiple] { min-block-size: var(--input-bs); }
	}
	:where(select:not([multiple],[size])) {
		--icon: url('/assets/svg/chevron-down.svg');
		padding-inline-end: calc((2 * var(--input-pi)) + 1.25ch);
		text-overflow: ellipsis;
	}
	:where(textarea) {
		/* field-sizing: content; */
		min-block-size: var(--input-bs);
		resize: vertical;
	}

	/* Icons and appearance */
	& [type=date],
	& [type=datetime-local],
	& [type=month],
	& [type=time] {
		appearance: none;
		background-color: inherit;
		&::-webkit-calendar-picker-indicator {
			background: none;
			border-radius: 50%;
			outline-offset: 2px;
			padding-inline-end: 0.25em;
		}
		&::-webkit-datetime-edit-day-field:focus,
		&::-webkit-datetime-edit-month-field:focus,
		&::-webkit-datetime-edit-year-field:focus {
			background: var(--AccentColor);
		}
	}
	& [type=email] { --icon: url('/assets/svg/email.svg'); }
	& [type=date],
	& [type=datetime-local] { --icon: url('/assets/svg/calendar.svg'); }
	& [type=month] { --icon: url('/assets/svg/week.svg'); }
	& [type=number] { --icon: url('/assets/svg/numbers.svg'); }
	& [type=password] { --icon: url('/assets/svg/lock.svg'); }
	& [type=search] {
		--icon: url('/assets/svg/search.svg');
		&:not(:placeholder-shown),
		&:focus-visible { --icon: none; }
	}
	& [type=tel] {  --icon: url('/assets/svg/phone.svg'); }
	& [type=time] { --icon: url('/assets/svg/time.svg'); }
	& [type=url] { --icon: url('/assets/svg/link.svg'); }
}