label {
  display: var(--label--layout);
  visibility: var(--label--visibility);
  font-family: var(--label--font-family);
  font-size: var(--label--font-size--mobile);
  font-weight: var(--label--font-weight);
  font-style: var(--label--font-style);
  line-height: var(--label--line-height);
  letter-spacing: var(--label--letter-spacing);
  text-transform: var(--label--text-transform);
  margin-bottom: var(--label--margin-bottom);
  color: var(--label--text);
}

@media (min-width: 768px) {
  label {
    font-size: var(--label--font-size);
  }
}

label .required {
  color: var(--label--accent);
}

input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
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,
textarea {
  font-family: var(--input--font-family);
  font-size: var(--input--font-size--mobile);
  font-weight: var(--input--font-weight);
  font-style: var(--input--font-style);
  line-height: var(--input--line-height);
  letter-spacing: var(--input--letter-spacing);
  text-transform: var(--input--text-transform);
  min-height: var(--input--min-height);
  margin: var(--input--margin);
  padding: var(--input--padding-y) var(--input--padding-x);
  border: var(--input--border);
  border-radius: var(--input--border-radius);
  background-color: var(--input--background);
  color: var(--input--text);
}

@media (min-width: 768px) {
  input[type="color"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="datetime"],
  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,
  textarea {
    font-size: var(--input--font-size);
  }
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--input--accent);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input.is-error,
input[aria-invalid="true"],
select.is-error,
select[aria-invalid="true"],
textarea.is-error,
textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.form-helper {
  font-family: var(--small-font-family);
  font-size: var(--small-font-size--mobile);
  color: var(--text);
  margin-top: var(--spacer--2xs);
}

@media (min-width: 768px) {
  .form-helper {
    font-size: var(--small-font-size);
  }
}

.form-error,
.form-error-message {
  font-family: var(--small-font-family);
  font-size: var(--small-font-size--mobile);
  color: var(--error);
  margin-top: var(--spacer--2xs);
}

@media (min-width: 768px) {
  .form-error,
  .form-error-message {
    font-size: var(--small-font-size);
  }
}

/* Gravity Forms Orbital inlines these on the wrapper; !important beats that. */
.gform_wrapper.gform-theme {
  --gf-color-primary: var(--accent) !important;
  --gf-color-primary-contrast: var(--button--color) !important;
  --gf-color-in-ctrl: var(--input--background) !important;
  --gf-ctrl-bg-color: var(--input--background) !important;
  --gf-ctrl-bg-color-hover: var(--input--background) !important;
  --gf-ctrl-bg-color-focus: var(--input--background) !important;
  --gf-ctrl-size: var(--input--min-height) !important;
  --gf-ctrl-padding-x: var(--input--padding-x) !important;
  --gf-ctrl-textarea-padding-y: var(--input--padding-y) !important;
  --gf-ctrl-radius: var(--input--border-radius) !important;
  --gf-ctrl-radius-max-sm: var(--input--border-radius) !important;
  --gf-ctrl-radius-max-md: var(--input--border-radius) !important;
  --gf-ctrl-radius-max-lg: var(--input--border-radius) !important;
  --gf-radius: var(--input--border-radius) !important;
  --gf-ctrl-textarea-radius: var(--input--border-radius) !important;
  --gf-ctrl-btn-bg-color-primary: var(--button--background) !important;
  --gf-ctrl-btn-color-primary: var(--button--color) !important;
  --gf-ctrl-btn-border-color-primary: var(--button--border) !important;
  --gf-ctrl-btn-bg-color-hover-primary: var(--button--background-hover) !important;
  --gf-ctrl-btn-color-hover-primary: var(--button--color-hover) !important;
  --gf-ctrl-btn-border-color-hover-primary: var(--button--border-hover) !important;
  --gf-ctrl-btn-bg-color-focus-primary: var(--button--background-hover) !important;
  --gf-ctrl-btn-color-focus-primary: var(--button--color-hover) !important;
  --gf-ctrl-btn-radius: var(--button--border-radius--lg) !important;
  --gf-ctrl-btn-shadow: var(--button--shadow) !important;
}