// Fylgja (https://fylgja.dev)
// Licensed under MIT Open Source

@use "props" as form;

$additional-selectors: ".form-input" !default;
$enable-switch: true !default;

$input-ignore-list: "[type=range], [type=button], [type=reset], [type=submit]";
$field-ignore-list: "[type=checkbox], [type=radio], [type=range], [type=button], [type=reset], [type=submit]";
$form-selectors: ":where(input:not(#{$input-ignore-list}), textarea, select)";

@if $additional-selectors {
	$form-selectors: ":where(input:not(#{$input-ignore-list}), textarea, select), #{$additional-selectors}";
}

#{$form-selectors} {
	@include form.base;
}

:where(input:not(#{$input-ignore-list}), textarea, select) {
	&:placeholder-shown {
		text-overflow: ellipsis;
	}

	&:focus-visible {
		border-color: var(--form-active-color);
	}

	&:disabled {
		box-shadow: none;
		cursor: not-allowed;
	}
}

:where(input:not(#{$field-ignore-list}), textarea, select) {
	--outline-size: 1px;
	--outline-offset: calc(
		(var(--form-border-width, #{form.$border-width}) + 1px) * -1
	);
	display: block;
	max-inline-size: 100%;
	inline-size: 100%;

	&:is(:disabled, [readonly]:not(:focus)) {
		border-style: var(
			--form-disabled-border-style,
			#{form.$disabled-border-style}
		);
	}
}

:where(input[type="checkbox"], input[type="radio"]) {
	@include form.control;
}

:where(input[type="radio"]) {
	--_gap: 3px;
	--control-radius: 50%;
}

:where(input[type="checkbox"]:not([role="switch"])) {
	--_gap: 1px;
	--_icon: url("#");
	--checked-icon: #{form.$control-icon-checked};
	--indeterminate-icon: #{form.$control-icon-indeterminate};

	&:indeterminate {
		--_show-icon: 1;
		--_icon: var(--indeterminate-icon);
	}

	&:checked {
		--_icon: var(--checked-icon);
	}
}

@if $enable-switch {
	:where(input[type="checkbox"][role="switch"]) {
		@include form.switch;
	}
}

:where(input[type="color"]) {
	@include form.color;
}

:where(input[type="file"]) {
	--form-py: 0;
	--form-px: 0 #{form.$padding-inline};
	--btn-radius: 0;
	--btn-border-width: 0;
	overflow: clip;

	&::file-selector-button {
		margin-inline-end: 1em;
	}
}

:where(select) {
	inline-size: auto;
	overflow-wrap: normal; // Remove the inheritance of word-wrap in Safari
}

:where(select:not([size]:not([size="1"]), [multiple])) {
	--icon-size: var(--select-icon-size, #{form.$icon-size});
	--icon-offset: var(--select-icon-offset, #{form.$padding-inline});
	padding-inline-end: calc(var(--icon-size) + var(--icon-offset) + 0.5ch);
	background: var(--select-icon, var(--select-light-scheme))
		var(--form-bg, #{form.$bg}) var(--icon-position, right)
		var(--icon-offset) center / var(--icon-size) no-repeat;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;

	&:dir(rtl) {
		--icon-position: left;
	}
}

:where(textarea) {
	resize: vertical;
}

:where(textarea:not([row])) {
	$min-size: calc(3.5lh + var(--form-py, #{form.$padding-block}));
	min-block-size: var(--textarea-min-size, #{$min-size});
	field-sizing: content;
}

// Reset the default opacity in Firefox,
// and apply a default placeholder color to a semi-transparent version of the current text color
::placeholder {
	opacity: 1;
	color: color-mix(in srgb, currentcolor 54%, transparent);
}

// Nuke the default styles for the fieldset and legend,
// and let authors determine what styles it needs to be, or just blank
// This reset will keep the default style behavior, so adding the border and padding will make the legend float with the box
:where(fieldset) {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
}

:where(legend) {
	padding: 0;
}

// Removes the extra space in older webkit browsers
::-webkit-search-decoration {
	-webkit-appearance: none;
}

// Fix extra space on date inputs, for Safari
::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
	display: inline;
	padding-block: 0;
}

::-webkit-date-and-time-value {
	min-height: 1lh; // Prevent collapse of date field on iOS Safari, if the value is empty
	text-align: inherit; // Correct text alignment in iOS Safari
}

// Fix datalist icon alignment in webkit browsers
::-webkit-calendar-picker-indicator {
	line-height: 1;
}

// prettier-ignore
:where([list]:not([type*="date"], [type="month"], [type="week"], [type="time"])) {
	--datalist-icon: var(--select-icon, var(--chevron-light-scheme));

	&::-webkit-calendar-picker-indicator {
		// stylelint-disable-next-line declaration-no-important
		display: block !important;
		background: var(--datalist-icon) center/contain no-repeat;
		opacity: 1;
	}

	&::-webkit-list-button {
		appearance: none;
		block-size: 1em;
		inline-size: 1em;
		padding: 3px;
		align-self: center;
		background: var(--datalist-icon) center/contain no-repeat;
	}
}