_input.scss

.input {
	display: inline-block;
	position: relative;
	margin-bottom: 1rem;
	margin-right: 0.5rem;

	&> .input-title, &> label {
		display: block;
		margin: 0;
		margin-bottom: .2rem;
		padding: 0;
		font-size: sp(10);
		font-weight: bolder;

		@include var("color", "tertiary-3");

		transition: color .25s;
	}

	&:focus-within > .input-title,
	&:focus-within > label {
		@include var("color", "secondary");
	}
}

@mixin input {
	@include var("border", (1px, solid, "tertiary-5"));
	@include var("background-color", "light");
	@include var("color", "tertiary");

	padding: .5rem .75rem;
	outline: none;
	appearance: none;
	-webkit-appearance: none;

	transition: border .25s;

	&:focus {
		border-color: currentColor;
	}

	&.is-invalid, &:invalid {
		@include var(border-color, "danger");
		@include var(color, "danger");
	}

	&.is-inactive, &[disabled] {
		@include var(border-color, "tertiary-5");
		@include var(color, "tertiary-5");
		@include var(background-color, "neutral");
	}
}

.input-text,
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea {
	@include input;

	width: 180px;
}