/* Form field with a floating label (CSS only, same technique as Bootstrap).

   <div class="field">
     <input class="field__input" id="email" name="email" type="email" placeholder=" "
            aria-describedby="email-error">
     <label class="field__label" for="email">Email address</label>
     <p class="field__error" id="email-error"></p>
   </div>

   - The input comes before its label, and needs placeholder=" " so CSS can tell when it is empty.
   - Error state: set aria-invalid="true" on the input and put the message in .field__error
     (JS while typing, PHP after submit). An empty .field__error takes no space.
   - Works the same for <select> (label always floated) and <textarea>. */

.field {
  position: relative;
  display: grid;
  gap: var(--sp-1);
}

.field__input {
  width: 100%;
  min-height: var(--field-h); /* also holds selects to the same height */
  padding: var(--sp-6) var(--sp-4) var(--sp-2);
  font-size: var(--fs-body);                    /* 16px: phones do not zoom */
  line-height: var(--lh-body);
  color: var(--c-text);
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-1);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

/* Fields show the ring on any focus, mouse included, as Bootstrap does. */
.field__input:focus {
  border-color: var(--c-focus-border);
  outline: var(--border-1) solid transparent;
  box-shadow: var(--focus-ring);
}

textarea.field__input {
  min-height: var(--sp-24);
  resize: vertical;
}

select.field__input {
  padding-right: var(--sp-10);
}

.field__label {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--sp-4);
  border: var(--border-1) solid transparent; /* same box as the input, so the text lines up */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--duration-fast) var(--ease);
}

/* Float the label up when the field has focus, has content, is autofilled, or is a select. */
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
select.field__input ~ .field__label {
  /* Shrinking also shrinks the label's left padding, so nudge it right to stay in line with the typed text. */
  transform: translate(calc(var(--sp-4) * 0.2), calc(-1 * var(--sp-2))) scale(0.8);
}

.field__input[aria-invalid="true"] {
  border-color: var(--c-error);
}

/* A field in error keeps its red border and gets a red ring, as in Bootstrap. */
.field__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 var(--sp-1) var(--c-error-ring);
}

.field__error {
  font-size: var(--fs-small);
  color: var(--c-error);
}

.field__error:empty {
  display: none;
}

.field__input:disabled {
  color: var(--c-text-muted);
  background-color: var(--c-surface);
  cursor: not-allowed;
}