/* Components: Forms > Input */

@utility input {
	background-color: transparent;
	border-radius: var(--radius-base);
	display: block;
	width: 100%;

	/* Size */
	font-size: var(--text-base);
	line-height: var(--text-base--line-height);
	padding-block: --spacing(1);
	padding-inline: --spacing(3);

	/* Edges */
	outline-color: transparent;
	border-width: 0;
	--tw-ring-inset: inset;
	--tw-ring-color: var(--color-surface-200-800);
	--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 var(--default-ring-width) var(--tw-ring-color, currentColor);
	box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

	@variant active {
		--tw-ring-color: var(--color-primary-500);
	}
	@variant focus {
		--tw-ring-color: var(--color-primary-500);
	}
	@variant focus-within {
		--tw-ring-color: var(--color-primary-500);
	}

	/* File Input --- */

	&[type='file']::file-selector-button {
		cursor: pointer;
		border-radius: var(--radius-base);
		background-color: var(--color-surface-950-50);
		color: var(--color-surface-50-950);
		transform: translateY(--spacing(-0.5));
		margin-right: --spacing(2);
		text-transform: capitalize;

		/* Size */
		font-size: var(--text-xs);
		height: var(--text-xs--line-height);
		padding-block: --spacing(0);
		padding-inline: --spacing(3);
	}

	/* Range Input --- */
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */

	&[type='range'] {
		accent-color: var(--color-surface-950-50);
		box-shadow: none;
		padding-inline: initial;
	}

	/* Color Picker Input --- */
	/* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */

	&[type='color'] {
		border-radius: var(--radius-base);
		width: --spacing(8.5);
		height: --spacing(8.5);
		padding: 0;
		border: none;
		outline: none;
		-webkit-appearance: none;
	}
	&[type='color']::-webkit-color-swatch-wrapper {
		padding: 0;
	}
	&[type='color']::-webkit-color-swatch {
		border: none;
		border-radius: var(--radius-base);
	}
	&[type='color']::-moz-color-swatch {
		border: none;
	}
	&[type='color']::-moz-color-swatch {
		border: none;
	}
}

/* Ghost Input*/
/* Used for the <TagsInput> component. */
@utility input-ghost {
	padding: 0px;
	background-color: transparent;

	border-color: transparent;
	outline-color: transparent;
	--tw-ring-color: transparent;

	@variant active {
		border-color: transparent !important;
	}
	@variant focus {
		border-color: transparent !important;
	}
	@variant focus-within {
		border-color: transparent !important;
	}
}