/**
 * @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 {
		color: var(--color-text-normal);
		font: inherit; /* 1 */
		margin: 0;
		padding-block: var(--size-5xs);
		padding-inline: var(--size-4xs);
	}

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

	.dark ::-webkit-calendar-picker-indicator {
		filter: invert(1);
	}

	@media (forced-colors: active) {
		.dark ::-webkit-calendar-picker-indicator {
			filter: invert(1);
		}
	}

	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);

		/**
		 * @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
		 */
		max-width: 100%;
		width: 100vw;
	}

	/**
	 * @bugfix Safari styles temporal fields with inconsistent inner padding
	 * This removes it, normalizing the fields with regular inputs
	 * @see https://github.com/cferdinandi/kelp/issues/235
	 */
	::-webkit-datetime-edit,
	::-webkit-datetime-edit-fields-wrapper,
	::-webkit-datetime-edit-text,
	::-webkit-datetime-edit-minute-field,
	::-webkit-datetime-edit-hour-field,
	::-webkit-datetime-edit-meridiem-field,
	::-webkit-datetime-edit-day-field,
	::-webkit-datetime-edit-month-field,
	::-webkit-datetime-edit-year-field  {
		padding: 0;
	}

	input::-webkit-inner-spin-button {
		height: auto;
	}

	:where(
		input,
		textarea,
		select
	):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="checkbox"] {
		font-weight: bold;
	}

	[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"]
	):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);
	}

	[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;
	}

	@media (forced-colors: active) {
		[type="radio"]:checked::after {
			content: '\002713';
		}
	}

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

	[type="checkbox"]:checked::after {
		content: '\002713';
		font-size: var(--size-xs);
	}

	:is(
		input,
		textarea,
		select
	):is(
		[readonly],
		[disabled]
	) {
		--background-color: var(--color-fill-muted);
		--color: var(--color-on-muted);
		background-color: var(--background-color);
		color: var(--color);
	}

	[disabled]:checked {
		--color-checked: var(--color-fill-muted);
		--color-checked-icon: var(--color-on-muted);
		border-color: var(--border-color);
	}

}
