form {
	--dim-max-width: 30em;
}

input,
select,
textarea {
	transition: all .2s ease-in-out;
}

.button a,
a.button,
.form-actions > a,
input[type="submit"],
input[type="button"],
button {
	text-decoration: none; /* for links */
}

/* there is a select with a max width for some reason */
form select {
	max-width: var(--dim-max-width);
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="time"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
	width: 100%;
	max-width: var(--dim-max-width);

	font-size: 100%;

	margin: 0;
	padding: 0.5em;

	box-shadow: inset 0 0.125em 0.25em rgba(0,0,0,0.125);

	outline-width: 2px;
	outline-color: transparent;
	outline-style: solid;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
	outline-color: var(--color-highlight);
}