/**
 * @section Forms
 * Form elements and various controls
 */

@layer kelp.core {
	fieldset {
		border: 0;
		padding: 0;
	}

	legend,
	label {
		--gap: var(--size-5xs);
		margin: 0;
		margin-block-end: var(--gap);
		padding: 0;
	}

	legend {
		display: block;
	}

	label {
		--gap: var(--size-5xs);
		display: flex;
		align-items: center;
		column-gap: var(--gap);
		width: 100%;
	}

	/**
	 * Implicit labels
	 */
	label:has(
			:is(input, select, textarea):not([type="radio"], [type="checkbox"])
		) {
		display: block;
		margin-block-end: 0;
	}

	label:has(input, select, textarea)
		:is(input, select, textarea):not([type="radio"], [type="checkbox"]) {
		margin-block-start: var(--gap);
	}

	/**
	 * 1. Correct font properties not being inherited.
	 */
	input,
	optgroup,
	select,
	textarea {
		--input-padding-block: var(--size-5xs);
		--input-padding-inline: var(--size-4xs);
		color: var(--color-text-normal);
		font-family: inherit; /* 1 */
		font-size: inherit; /* 1 */
		margin: 0;
		padding-block: var(--input-padding-block);
		padding-inline: var(--input-padding-inline);
	}

	::placeholder {
		color: var(--color-text-muted);
	}

	input,
	textarea,
	select {
		--border-size: 1px;
		--border-color: var(--color-border-vivid);
		--border-style: solid;
		--border-radius: var(--border-radius-s);
		background-color: var(--color-background);
		border: var(--border-size) var(--border-style) var(--border-color);
		border-radius: var(--border-radius);
		color: var(--color-text-input);
		line-height: var(--line-height-m);
		width: 100%;
	}

	/**
	 * @bugfix Required for proper width in Safari
	 * width: 100% is ignored by Safari unless display: block is set,
	 * but that messes up the vertical padding in temporal inputs.
	 * This let's temporal inputs keep their default inline-flex value.
	 */
	input:not(
			[type="date"],
			[type="time"],
			[type="datetime-local"],
			[type="month"],
			[type="week"],
			[type="checkbox"],
			[type="radio"]
		),
	textarea,
	select {
		display: block;
	}

	:where(input, textarea, select):not(:last-child, [aria-invalid="true"]) {
		margin-block-end: var(--size-xl);
	}

	.validation-error {
		color: var(--color-danger-outline);
		margin-block-start: var(--size-5xs);
	}

	.validation-error:not(:last-child) {
		margin-block-end: var(--size-xl);
	}

	textarea {
		--height: 8em;
		min-height: var(--height);
		overflow: auto;
		resize: vertical;
	}

	[type="image"],
	[type="checkbox"],
	[type="radio"] {
		cursor: pointer;
		display: inline-block;
		height: auto;
		width: auto;
		padding: 0;
	}

	[type="checkbox"],
	[type="radio"] {
		appearance: none;
		height: var(--size-m);
		width: var(--size-m);

		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
	}

	[type="radio"] {
		border-radius: 50%;
	}

	[type="color"] {
		height: 3em;
		width: 3em;
	}
}

@layer kelp.state {
	:is(input, textarea, select):not(
			[type="checkbox"],
			[type="radio"],
			[type="range"],
			[type="file"]
		):focus,
	:is([type="checkbox"], [type="radio"], [type="range"]):focus-visible {
		outline-color: var(--focus-ring-color);
		outline-style: var(--focus-ring-style);
		outline-width: var(--focus-ring-width);
		outline-offset: var(--focus-ring-offset);
	}

	:is(
			:user-invalid,
			[aria-invalid="true"],
			[aria-invalid="true"] :is([type="radio"], [type="checkbox"])
		) {
		--border-color: var(--color-invalid);
		--color-checked: var(--color-invalid);
		--focus-ring-color: var(--color-invalid);
	}

	[type="radio"]:checked {
		background-color: transparent;
		border-color: var(--color-checked);
	}

	[type="radio"]:checked::after {
		background-color: var(--color-checked);
		border-radius: 50%;
		content: "";
		width: 0.667em;
		aspect-ratio: 1;
	}

	[type="checkbox"]:not([role="switch"]):is(:checked, :indeterminate) {
		background-color: var(--color-checked);
		border-color: var(--color-checked);
		color: var(--color-checked-icon);
	}

	[type="checkbox"]:not([role="switch"]):is(:checked, :indeterminate)::after {
		content: "";
		height: 0.667em;
		width: 0.667em;
		box-shadow: inset 1em 1em var(--color-checked-icon);
	}

	[type="checkbox"]:not([role="switch"]):checked::after {
		clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
		margin-top: -0.0625em;
		rotate: 45deg;
	}

	[type="checkbox"]:not([role="switch"]):indeterminate::after {
		clip-path: inset(40% 10% round 50%);
	}

	@media (forced-colors: active) {
		:is([type="checkbox"], [type="radio"]):not([role="switch"]):is(
				:checked,
				:indeterminate
			)::after {
			background-color: CanvasText;
		}
	}

	:is(input, textarea, select):not([type="checkbox"], [type="radio"]):is(
			[readonly],
			[disabled]
		) {
		--background-color: var(--color-fill-muted);
		--color: var(--color-on-muted);
		background-color: var(--background-color);
		color: var(--color);
	}

	:is([type="checkbox"], [type="radio"])[disabled] {
		cursor: not-allowed;
		opacity: 0.6;
	}
}