/*
** /styles/site_forms.css
*/

/****************************
** Forms
****************************/

input, textarea, select, option {
  margin-top: 5px;
  /*margin-bottom: 10px;*/
  padding-left: 5px;
  padding-right: 5px;
  
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: var(--color-border-site-040);
  border-radius: 0px;
  
  color: var(--color-text-site-080);
  background-color: var(--color-background-site-000);
  
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

input:hover {
  transition: inherit;
}

input:required {
  outline: 1px solid var(--color-border-theme-040);
  outline-offset: 2px;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

input:valid {
  border-color: var(--color-lime-050);
}

input:focus, textarea:focus, select:focus, option:focus {
  border-color: var(--color-border-theme-030);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 0px;
  border-color: var(--color-border-theme-030);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

input[type=text] {
  transition: inherit;
}

input[type=date] {
  transition: inherit;
}

input[type=submit] {
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

input[type=submit]:hover {
  background-color: var(--color-background-theme-020);
}

input[type=checkbox] {
  transition: inherit;
}

input[type=radio] {
  transition: inherit;
}

input:invalid {
  color: red;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

input::placeholder {
  font-style: italic;
}

option {
  padding-top: 1px;
  padding-bottom: 1px;
}

option:hover {
  background-color: var(--color-background-theme-020);
}