/**
 * @file
 * CSS for form components.
 */




/**
 * ===== FORM =====
 */
button,
form,
fieldset,
input,
legend,
option,
select,
textarea {
  color: var(--site--body--text-color--01);
  color: var(--site--body--text-color--02);
  font-family: "Usual", sans-serif;
  font-size: 1.0rem;
  font-weight: 400;
  line-height: 1.5;
}




/**
 * ===== FORM =====
 */
form {}




/**
 * ===== FIELDSET =====
 */
fieldset {}
legend {}




/**
 * ===== LABEL =====
 */
label {
  display: block;
  font-weight: 500;
  padding: 0.5rem 0;
}




/**
 * ===== INPUT =====
 */
input {
  background-color: var(--site--form--back-color--01);
  border: 2px solid var(--site--form--brdr-color--01);
  border-radius: 0;
  box-sizing: border-box;
  padding: 13px;
}
input:focus {
  background-color: var(--site--form--back-color--02);
  border-color: var(--site--form--brdr-color--02);
}




/**
 * ===== SELECT =====
 */
select {
  background-color: var(--site--form--back-color--01);
  border: 2px solid var(--site--form--brdr-color--01);
  border-radius: 0;
  box-sizing: border-box;
  padding: 13px;
}
select:focus {
  background-color: var(--site--form--back-color--02);
  border-color: var(--site--form--brdr-color--02);
}




/**
 * ===== TEXTAREA =====
 */
textarea {
  background-color: var(--site--form--back-color--01);
  border: 2px solid var(--site--form--brdr-color--01);
  border-radius: 0;
  box-sizing: border-box;
  padding: 13px;
  width: 100%;
}
textarea:focus {
  background-color: var(--site--form--back-color--02);
  border-color: var(--site--form--brdr-color--02);
}