form {
	--dim-max-width: 40em;
	max-width: var(--dim-max-width);
}

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

.form-item {
	position: relative;
	margin-top: 0.5em;
	padding: 0.5em 0.25em;
}

.form-item.error {
	outline-width: 1px;
	outline-style: solid;
	outline-color: var(--color-red);
}

.form-item.js-form-type-statemarkup {
	margin: 0;
	padding: 0;
}

.form-item.js-form-type-radio,
.form-item.js-form-type-checkbox {
	padding: 0;
}

.form-item.js-form-type-radio > *,
.form-item.js-form-type-checkbox > * {
	padding: 0;
	margin: 0;
}

.form-item > legend,
.form-item > label {
	font-weight: 400;
	margin-bottom: 0.375rem;
}

.form-item > input,
.form-item > textarea,
.form-item > select {
	line-height: 2;
}

.button a,
a.button,
.form-actions > a,
input[type="submit"],
input[type="button"],
button {
	text-transform: none;
	text-decoration: none; /* for links */
	text-shadow: none; /* this doesn't look good */

	padding: 0.75em 2em;

	margin: 0.5em 0.25em 0.25em 0;

	transition: all .2s ease-in-out;
}

/* reset button background for the toolbar UI, the button styling should probably
 * be more specific about being for the page content, also remove the margin since
 * the toolbar buttons are always visible now */
.toolbar button {
	text-transform: none;
	background: none;
	margin: 0;
}

/* 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%;

	color: inherit;
	background-color: white;

	font-size: 100%;

	margin: 0;
	padding: 0.5em;
	
	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);
}

form.generic-form {
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-light-grey);

	box-sizing: border-box;

	padding: 1em;
	margin: 0 auto;
}