fieldset {
  background-color: var(--color-panel-bg);
  border: 1px solid var(--color-border);
  margin: 0 0 var(--spacing-small);
  padding: var(--spacing-base);
}

input,
label,
select {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
}

label {
  font-weight: 600;
  margin-bottom: 7.2px;
}

label.required::after {
  content: "*";
}

label abbr {
  display: none;
}

input[type="color"],
input[type="date"],
input[type="datetime"],
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"],
select[multiple="multiple"],
textarea {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 6%);
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-small);
  padding: 9.6px;
  transition: border-color 0.15s ease;
  width: 100%;
}

input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="email"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="time"]:hover,
input[type="url"]:hover,
input[type="week"]:hover,
select[multiple="multiple"]:hover,
textarea:hover {
  border-color: #c4c4c4;
}

input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
select[multiple="multiple"]:focus,
textarea:focus {
  border-color: var(--color-action);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 6%), 0 0 5px rgb(36 114 164 / 70%);
  outline: none;
}

textarea {
  resize: vertical;
}

input[type="search"] {
  appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin-right: 7.2px;
}

input[type="file"] {
  padding-bottom: var(--spacing-small);
  width: 100%;
}

select {
  margin-bottom: var(--spacing-base);
  max-width: 100%;
  width: auto;
}