/****************************************************/
/*** FORMS & INPUT ***/
/****************************************************/
.required {
	color: var(--error-500);
}
input, fieldset, legend, textarea, button, option {
	appearance: none;
}
input, select {
	background: #fff;
	border: none;
	color: var(--secondary-700);
	font-family: var(--font-sans);
}
input[type=number], input[type=tel], input[type=date], .date, .ui-spinner {
	font-family: var(--font-mono);
}
label {
	color: var(--inner-1000);
}
[disabled], [readonly] {
	opacity: .5;
	cursor: not-allowed;
}

.input-wrapper {
	width: clamp(3rem, 20rem, calc(100% - var(--spacing)));
	margin: calc(var(--spacing) * .5);
	position: relative;
	
	mark {
		background: var(--inner-800);
		outline-color: var(--inner-800);
	}
	.input:not(:has(.label)), .icon,
	input:not([type=checkbox], [type=radio], .spinner) {
		padding: calc(var(--spacing) * .5);
		margin: calc(var(--spacing) * .25);
	}
	.input {
		color: var(--secondary-600);
		background: var(--highlight);
		border: var(--img-box-border-height) solid transparent;
		border-image: var(--img-box-border) round
			var(--img-box-border-slice) /
			var(--img-box-border-height) /
			var(--img-box-border-outset);
		font-size: var(--text-sm);
		height: 100%;
		padding: 0 calc(var(--spacing) * 1.5);
		display: inline-flex;
		justify-items: center;
		align-items: center;
		flex-shrink: 1;
		gap: calc(var(--spacing) * 2);
		vertical-align: middle;
		white-space: nowrap;
		position: relative;
		transition: none;
		
		/* basic inputs */
		&:not([type=checkbox], [type=radio]):focus {
			background: var(--inner-200);
			border-image-source: var(--img-box-focus-border);
			outline: none;
		}
		input:not([type=checkbox], [type=radio]) {
			width: 100%;
			background: none;
			border: none;
			padding: 0;
		}
		.label {
			color: var(--label);
			background: var(--label-bg);
			border-radius: var(--radius) 0 0 var(--radius);
			width: 20%;
			min-width: 100px;
			height: 100%;
			padding: calc(var(--spacing) * .5);
		}
		&:not(:has(input[type=checkbox], input[type=radio])) .label {
			margin: 0 0 0 -.75rem;
		}
	}
	
	/* checkbox */
	.checkbox, .radio {
		background: none;
		border: none;
		padding: 0;
	}
	
	/* date */
	input[type=date] {
		width: 100%;
	}
	
	/* textarea */
	&:has(textarea) {
		width: calc(100% - var(--spacing));
		&:has([disabled], [readonly]) {
			opacity: .5;
			textarea {
				opacity: 1;
			}
		}
	}
	textarea {
		width: 100%;
	}
	.resizer {
		background: var(--img-resizer) bottom right no-repeat;
		width: var(--img-resizer-height);
		height: var(--img-resizer-height);
		right: 0;
		bottom: 0;
		position: absolute;
		pointer-events: none;
	}
	
	/* icons */
	.icon {
		color: var(--inner-600);
		font-size: var(--text-base);
		min-width: var(--text-base);
		padding: 0;
		margin: 0;
		&:is(.password_visibility_toggle .icon):hover {
			color: var(--emphasis-light);
		}
	}
	.password_visibility_toggle {
		cursor: pointer;
		z-index: 1;
	}
	
	.validator-hint, .help {
		font-size: 11px;
		padding: var(--spacing);
	}
	
	/* validation */
	.validator-hint {
		color: var(--error-500);
		font-weight: bold;
		display: none;
	}
	&:has(:user-invalid) {
		.validator-hint {
			display: block;
		}
		input:not([type=checkbox], [type=radio]):focus {
			outline: none;
		}
		.input {
			color: var(--error-500);
			background: var(--error-150);
			input, select, textarea {
				color: var(--error-700);
			}
			.icon {
				color: var(--error-400);
				&:is(.password_visibility_toggle .icon):hover {
					color: var(--error-500);
				}
			}
			&:has(input:focus) {
				background: var(--error-200);
				border-image-source: var(--img-box-inner-error-border);
			}
		}
	}
	
	/* help/information */
	.help {
		color: var(--inner-800);
		font-style: italic;
	}
}

/****************************************************/
/*** CHECKBOX & RADIO INPUT ***/
/****************************************************/
input[type=checkbox], input[type=radio], .checkbox, .radio {
	background: var(--highlight);
	border: 2px solid var(--inner-500);
	border-radius: 1em;
	width: var(--text-base);
	height: var(--text-base);
	padding: var(--spacing);
	margin-right: calc(var(--spacing) * .25);
	vertical-align: middle;
	position: relative;
	&:checked {
		background: var(--inner-400);
		border-color: var(--inner-700);
		box-shadow: 0 0 0 2px var(--inner-200) inset;
	}
	&:focus {
		outline: 2px solid var(--inner-500);
	}
	/* checkbox only */
	&:is(.checkbox, input[type=checkbox]) {
		border-radius: calc(var(--radius) * .5);
		&:checked {
			box-shadow: none;
			&:before {
				content: "\2713";
				color: var(--inner-100);
				text-shadow: .07em .07em .07em var(--inner-700),
					-.07em -.07em .07em var(--inner-700),
					-.07em .07em .07em var(--inner-700),
					.07em -.07em .07em var(--inner-700);
				font-size: var(--text-base);
				font-weight: bold;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				position: absolute;
			}
		}
	}
}

/****************************************************/
/*** TEXTAREA ***/
/****************************************************/
textarea {
	background: none;
	border: none;
	padding: calc(var(--spacing) * .5);
	resize: vertical;
}

/****************************************************/
/*** FILE INPUT ***/
/****************************************************/
input[type=file] {
	width: clamp(3rem, 20rem, 100%);
	max-width: 100%;
}

/****************************************************/
/*** RANGE INPUT ***/
/****************************************************/
input[type=range] {
	background: transparent;
	border: none;
	outline: none;
	border-radius: 1em;
	height: 2em;
	width: clamp(3rem, 20rem, 100%);
	vertical-align: middle;
	overflow: hidden;
	&::-moz-range-progress {
		background: var(--primary-400);
		height: 100%;
	}
	&::-moz-range-thumb, &::-webkit-slider-thumb {
		background: var(--primary-100);
		border: .5rem solid var(--primary-400);
		border-radius: 5rem;
		width: 2em;
		height: 2em;
		box-sizing: border-box;
	}
	&::-moz-range-track, &::-webkit-slider-runnable-track {
		background: #fff;
		border-radius: 1em;
		height: 1em;
	}
}

/****************************************************/
/*** SELECT & OPTIONS ***/
/****************************************************/
select {
	padding: calc(var(--spacing) * .75);
	transition: all 0.4s;
	&:hover, &:focus, &:open {
		color: var(--secondary-600);
		background: var(--inner-100);
		border-color: var(--primary-200);
	}
}
option {
	&:hover, &:focus {
		color: var(--emphasis);
		background: var(--inner-300);
	}
	&:checked {
		color: var(--emphasis);
		font-weight: bold;
	}
	&:is([disabled], [readonly]) {
		background: none;
		color: var(--emphasis-light);
		font-style: italic;
	}
}

/****************************************************/
/*** BUTTONS ***/
/****************************************************/
.btn, button, input[type=file]::file-selector-button, [role=button] {
	color: #fff;
	background: linear-gradient(var(--primary-50),
		var(--primary-100));
	border: 1px solid var(--emphasis-light);
	border-radius: var(--radius);
	box-shadow: 0 -1px 0 inset var(--highlight);
	font-family: var(--font-accent);
	font-size: var(--text-sm);
	text-shadow: 1px 1px var(--emphasis),
		-1px -1px var(--emphasis),
		1px -1px var(--emphasis),
		-1px 1px var(--emphasis),
		0 -1px var(--emphasis),
		0 1px var(--emphasis),
		-1px 0 var(--emphasis),
		1px 0 var(--emphasis),
		0 0 3px var(--emphasis);
	letter-spacing: 1px;
	font-weight: bold;
	padding: calc(var(--spacing) * .5)
		calc((var(--spacing) * 1.25) + 1px)
		calc((var(--spacing) * .5) + 1px)
		calc(var(--spacing) * 1.25);
	margin: calc(var(--spacing) * .5);
	transition: none;
	&:hover {
		color: var(--highlight);
		background: linear-gradient(var(--primary-200),
			var(--primary-100));
		border-color: var(--emphasis);
		box-shadow: 0 -1px 0 inset var(--inner-100);
		text-shadow: 1px 1px var(--primary-500),
			-1px -1px var(--primary-500),
			1px -1px var(--primary-500),
			-1px 1px var(--primary-500),
			0 -1px var(--primary-500),
			0 1px var(--primary-500),
			-1px 0 var(--primary-500),
			1px 0 var(--primary-500),
			0 0 3px var(--primary-500);
	}
	&:is(.btn, button, [role=button]):not(.btn-active):active {
		padding: calc((var(--spacing) * .5) + 1px)
			calc(var(--spacing) * 1.25)
			calc(var(--spacing) * .5)
			calc((var(--spacing) * 1.25) + 1px);
	}
	&:is(a) {
		display: inline-block;
		text-decoration: none;
	}
}

/****************************************************/
/*** FIELDSET & CONTAINED ROW INPUTS ***/
/****************************************************/
fieldset {
	color: var(--inner-1000);
	background: var(--inner-100);
	border: 1px solid var(--inner-400);
	border-radius: calc(var(--radius) * .5);
	padding: calc(var(--spacing) * 2) var(--spacing)
		var(--spacing) var(--spacing);
	margin-top: calc(var(--spacing) * 3);
	position: relative;
	legend {
		color: var(--secondary-500);
		background: var(--highlight);
		border: 1px solid var(--inner-400);
		border-radius: var(--radius);
		padding: calc(var(--spacing) * .5) var(--spacing);
		top: calc(var(--spacing) * -.75);
		position: relative;
	}
	
	/* input rows */
	.info {
		padding: var(--spacing);
	}
	.row {
		background: var(--inner-200);
		border: 1px solid var(--inner-300);
		border-radius: calc(var(--radius) * .5);
		margin: calc(var(--spacing) * .5);
		grid-auto-columns: 1fr 3fr;
		grid-auto-rows: minmax(1rem, auto);
		grid-auto-flow: column;
		display: grid;
		
		/* inputs */
		.input-wrapper {
			width: calc(100% - var(--spacing));
		}
		textarea, input:not([type=checkbox], [type=radio]),
		.input, select {
			border: var(--img-box-border-height) solid transparent;
			border-image: var(--img-box-inner-border) round
				var(--img-box-border-slice) /
				var(--img-box-border-height) /
				var(--img-box-border-outset);
			width: 100%;
			height: fit-content;
			margin: auto 0;
			position: relative;
			&:focus {
				background: var(--inner-100) !important;
				border-image-source: var(--img-box-inner-border) !important;
				outline: none !important;
			}
		}
		
		/* focus */
		:is(.input-wrapper, .input):not(:has(:user-invalid))
		:has(input:not([type=checkbox], [type=radio]):focus) {
			background: var(--inner-100);
			border-image-source: var(--img-box-inner-border);
			outline: none;
		}
		
		/* validator */
		&:has(:user-invalid) {
			background: var(--error-100);
			textarea, input:not([type=checkbox], [type=radio]),
			.input, select {
				border-image-source: var(--img-box-inner-error-border);
			}
			.row-label {
				color: var(--error-400);
				background: var(--error-50);
			}
		}
	}
	.row-left {
		text-align: right;
		font-weight: bold;
		font-style: italic;
		display: block;
	}
	.row-right {
		padding: var(--spacing);
	}
	
	/* labels */
	.row-label {
		color: var(--secondary-400);
		background: var(--highlight);
		padding: calc(var(--spacing) * .5) var(--spacing);
		height: 100%;
		display: block;
		word-break: normal;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
	.labeled input {
		vertical-align: middle;
	}
}

/****************************************************/
/*** PAGINATION ***/
/****************************************************/
.pagination {
	color: var(--emphasis);
	background: color-mix(in oklab, var(--primary-200),
		transparent 50%);
	box-shadow: 0 0 1px 1px color-mix(in oklab,
			var(--primary-200), transparent 50%);
	border-radius: var(--radius);
	font-family: var(--font-trebuchet);
	font-size: var(--text-3xl);
	text-align: center;
	margin: calc(var(--spacing) * 2) 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	> * {
		background: var(--primary-50);
		box-shadow: 0 -1px inset var(--highlight);
		border-style: solid;
		border-color: var(--primary-200) var(--primary-300)
			var(--primary-300) var(--primary-200);
		border-width: 1px 1px 1px 0;
		padding: var(--spacing) 0;
		&:is(:first-child) {
			border-radius: var(--radius) 0 0 var(--radius);
			border-left-width: 1px;
		}
		&:is(:last-child) {
			border-radius: 0 var(--radius) var(--radius) 0;
		}
		&:is(a) {
			color: var(--emphasis-dark);
			text-decoration: none;
			&:hover {
				color: var(--emphasis);
				background: linear-gradient(var(--primary-200),
					var(--primary-100));
				box-shadow: 0 1px inset var(--primary-50);
			}
		}
		&:is(span) {
			opacity: .5;
		}
	}
}

/****************************************************/
/*** CARDS ***/
/****************************************************/
.card:not(.card-info, .card-success, .card-warning,
.card-error) {
	color: var(--secondary-600);
	background: var(--highlight);
	border-color: var(--inner-500);
}
.card, .card-info, .card-success, .card-warning,
.card-error {
	box-shadow: 0 .1em .3em color-mix(in oklab,
		var(--secondary-700) 50%, transparent);
}

/****************************************************/
/*** TABLES ***/
/****************************************************/
.flex-table {
	.col {
		color: var(--secondary-600);
		background: var(--highlight);
		border-color: var(--inner-500);
		&:is(header.row .col) {
			color: var(--inner-900);
			background: linear-gradient(var(--primary-100),
				var(--primary-50));
			border-color: var(--primary-300);
		}
		&:is(.row:first-child .col) {
			border-top-color: var(--inner-400);
			&:is(header.row .col) {
				border-top-color: var(--primary-200);
			}
		}
		&:is(.row .col:first-child) {
			border-left-color: var(--inner-400);
			&:is(header.row .col) {
				border-left-color: var(--primary-200);
			}
		}
	}
}