form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;

    transition-duration: var(--pace-fast);
}

input:not([type="checkbox"]), textarea, select {
	min-width: 300px;

    font-weight: 400;
    font-style: normal;
    font-family: 'Poppins', sans-serif;
    line-height: normal;

	color: var(--black);
	padding: var(--space-sm);
	
	outline: 1px solid var(--dark);
	border: none;
	border-radius: var(--curve-md);

	&::placeholder { color: var(--dark); }
	&:focus { outline-color: var(--primary); }

	&:user-valid {
		outline-color: var(--success);
	}

	&:user-invalid {
		outline-color: var(--error);
	}

	/* &:not(:placeholder-shown):valid {
		outline-color: var(--success);
	}

	&:not(:placeholder-shown):invalid {
		outline-color: var(--error);
	} */
}

input[type="number"] {
	min-width: 100px;

	&::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
		opacity: 1;
		padding: 0.2em;
	}
}

input[type="checkbox"] {
	appearance: none;
	width: 0.8em;
	height: 0.8em;

	outline: 1px solid var(--dark);
	border: none;
	border-radius: 2px;

	cursor: pointer;

	&:hover {
		outline: 1px solid var(--primary);
	}

	&:checked {
		background-color: var(--low);
		outline-color: var(--low);
	}

	&:disabled {
		background-color: var(--light);
		outline-color: var(--error);
	}
}

button {
	padding: 0.5em 2em;
	&.square { padding: 0.5em 0.8em; }
	border-radius: var(--curve-md);
	
	color: var(--white);
	background-color: var(--low);
	border: 2px solid var(--low);

	&:hover {
		color: var(--low);
		background-color: transparent;
	}

	&.white {
		color: var(--low);
		background-color: var(--white);
		border: 2px solid var(--white);

		&:hover {
			color: var(--white);
			background-color: transparent;
		}
	}

	.icon, i { transition-duration: var(--pace-fast); }
    &:hover, &:focus-visible {
        outline: none;
        .icon { color: var(--primary); }
    }
}

.input-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);

	> label {
		color: var(--low);
		font-weight: 700;
	}
}