.form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-header {
  text-align: center;
  margin-bottom: var(--form-header-margin-bottom, 16px);
  font-size: var(--form-header-font-size, var(--font-size-2xl));
  line-height: var(--form-header-line-height, var(--line-height-2xl));
  font-weight: var(--form-header-font-weight, var(--font-weight-medium));
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--form-field-margin-bottom, 16px);
}

.form input[type="submit"] {
  margin-top: var(--form-input-submit-margin-top, 16px);
  margin-bottom: var(--form-input-submit-margin-bottom, 16px);
  padding: var(--form-input-submit-padding, 8px 16px);
  border: 1px solid var(--form-input-submit-border-color, var(--color-gray-300));
  border-radius: var(--form-input-submit-border-radius, 4px);
  outline: none;
  font-size: var(--form-input-submit-font-size, var(--font-size-md));
  line-height: var(--form-input-submit-line-height, var(--line-height-md));
  font-weight: var(--form-input-submit-font-weight, var(--font-weight-medium));
}

.form input[type="submit"]:focus-visible {
  --form-input-submit-border-color: var(--color-gray-700);
}

.form-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--form-footer-font-size, var(--font-size-base));
  line-height: var(--form-footer-line-height, var(--line-height-base));
  gap: var(--form-footer-gap, 4px);
}

.form-field__label {
  font-size: var(--form-field-label-font-size, var(--font-size-base));
  line-height: var(--form-field-label-line-height, var(--line-height-base));
  margin-bottom: var(--form-field-label-margin-bottom, 4px);
}

/* Fields  */
.form-field__input {
  outline: none;
  padding: var(--form-field-input-padding, 8px 16px);
  border: 1px solid var(--form-field-input-border-color, var(--color-gray-300));
  border-radius: var(--form-field-input-border-radius, 4px);
}

.form-field__input:focus-visible {
  --form-field-input-border-color: var(--color-gray-500);
}