/*
*	Reset
*/
fieldset,
legend,
select,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

fieldset,
legend,
select,
input,
textarea {
	-webkit-border-radius: 0.35rem;
	-moz-border-radius: 0.35rem;
	border-radius: 0.35rem;
}

/*
*	Label & Input / Select / Textarea
*/
label,
input,
select {
	max-width: 100%;
}

input,
select,
textarea {
  --background-color: #fff;
  --color: #666;
  --border-color: #aaa;
  --outline-color: #aaa;

  font-size: 0.9rem;
  font-weight: normal;
  line-height: 1;

  color: var(--color);
  background-color: var(--background-color);
  border-color: var(--border-color);

	padding: 0.35rem 0.35rem;

	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

input[type="number"] {
	padding-right: 0;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea {
	border-width: 1px;
	border-style: solid;
}

/*
*	Select
*/
select {
	margin: 0;
}

/*
*	Submit
*/
input[type='submit'] {
	min-width: 150px;
	padding: 7px 10px;
	border: 0px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
}

/*
*	Description
*/
form .description {
	display: none;
}

/*
*	Required
*/
.form-required::after {
	content: "*";
	display: inline-block;
	margin-left: 3px;
}

/*
*	Errors
*/
input:not([type="checkbox"]):not([type="radio"]).error {
	border-width: 2px;
	border-style: solid;
}

input[type='checkbox'].error {
	outline-width: 2px;
	outline-style: solid;
}

input:not([type="checkbox"]):not([type="radio"]).error,
textarea.error {
  --border-color: #F00;
}

input[type='checkbox'].error {
  --outline-color: #F00;
}

input:disabled,
select:disabled {
  --background-color: #eee;
}

.form-required::after {
  --color: #F00;
  color: var(--color);
}

/* Inline error messages */
.form-item--error-message {
  width: 100%;
  padding-left: var(--label-width);
  padding-left: calc(var(--label-width) + var(--gap-default));
  font-size: 0.8rem;
  --color: red;
  color: var(--color);
}
