@mixin windows-input-hover {
	@media (prefers-color-scheme: light) {
		background-color: var(--color-background50);
		background-image: none;
	}

	@media (prefers-color-scheme: dark) {
		background-color: var(--fill-quarternary);
		background-image: none;
	}
}

@mixin windows-input-active {
	outline: none;
	background-clip: border-box, padding-box;
	@media (prefers-color-scheme: light) {
		border: 1px solid var(--fill-quinary);
		border-bottom-color: var(--accent-blue);
		background-color: unset;
		background-image:
			linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
			linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
	}

	@media (prefers-color-scheme: dark) {
		border: 1px solid var(--fill-quinary);
		border-bottom-color: var(--accent-blue);
		background-color: unset;
		background-image:
			linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
			linear-gradient(var(--fill-senary), var(--fill-senary));
	}
}

@mixin windows-input-disabled {
	@media (prefers-color-scheme: light) {
		border: 1px solid var(--fill-quinary);
		border-bottom-color: var(--fill-quinary);
		background-color: var(--color-background70);
		background-image: none;
	}

	@media (prefers-color-scheme: dark) {
		border: 1px solid var(--fill-quinary);
		border-bottom-color: var(--fill-quinary);
		background-color: var(--fill-senary);
		background-image: none;
	}
}


input:is([type=color], [type=date], [type=datetime-local], [type=email], [type=month],
	[type=number], [type=password], [type=search], [type=tel], [type=text], [type=time],
	[type=url], [type=week], [type=autocomplete]):not([no-windows-native]),
input:not([type], [no-windows-native]),
textbox:not([no-windows-native]),
search-textbox:not([no-windows-native]),
textarea:not([no-windows-native]) {
	appearance: none;
	height: 26px;
	padding: 0;
	padding-inline-start: 5px;
	border: solid 1px transparent;
	border-radius: 3px;

	background-origin: border-box;
	background-clip: padding-box;
	// Overwrite default background color
	background-color: unset;
	@media (prefers-color-scheme: light) {
		border: 1px solid rgba(0, 0, 0, 0.0578);
		border-bottom-color: rgba(0, 0, 0, 0.4458);
		background-color: var(--color-background70);
	}

	@media (prefers-color-scheme: dark) {
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-bottom-color: rgba(255, 255, 255, 0.5442);
		background-color: var(--fill-quinary);
	}

	&:not([disabled]):not([readonly]) {
		&::placeholder {
			color: var(--fill-secondary);
		}

		&:hover {
			@include windows-input-hover;
		}
	
		&:active,
		&:focus,
		&:focus-visible {
			@include windows-input-active;
		}	

		&::selection {
			background-color: var(--accent-blue);
			color: var(--accent-white);
		}

		&:-moz-window-inactive {
			&::selection {
				background-color: var(--tag-gray);
			}
		}
	}

	&:disabled,
	&:read-only {
		&::placeholder {
			color: var(--fill-tertiary);
		}

		&::selection {
			background-color: var(--tag-gray);
			color: var(--accent-white);
		}

		@include windows-input-disabled;
	}
}

textarea {
	height: unset;
}