/*
 * A text field with a floating label (`shared/_text_field`), and the error
 * line under it (`shared/_error_message`).
 *
 * The label is the input's following sibling and sits inside the field until
 * there is something to make room for: focus, or a value. The input carries an
 * empty placeholder so `:placeholder-shown` can tell the two apart.
 *
 * 16px text so iOS does not zoom on focus; a boundary at 3:1; the focus ring
 * from base.css plus an accent border; red border and label, and
 * aria-invalid, when the form object reports an error.
 */
@layer components {
  .field {
    position: relative;
  }

  .field__input {
    display: block;
    inline-size: 100%;
    min-block-size: 3.25rem;
    padding: 1.375rem var(--space-sm) 0.375rem;
    border: var(--rule-width) solid var(--color-rule-control);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-input);
    line-height: var(--leading-input);
    appearance: none;
    transition: border-color var(--duration-fast);

    &:hover {
      border-color: var(--color-ink-subtle);
    }

    &:focus {
      border-color: var(--color-accent);
    }

    &[aria-invalid="true"] {
      border-color: var(--color-loss);
    }

    &:is(textarea) {
      min-block-size: 8rem;
    }
  }

  .field__label {
    position: absolute;
    inset-block-start: 0.4375rem;
    inset-inline-start: var(--space-sm);
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);
    line-height: var(--leading-meta-xs);
    pointer-events: none;
    transition: all var(--duration-fast);

    .field__input:placeholder-shown:not(:focus) + & {
      inset-block-start: 0.9375rem;
      font-size: var(--text-input);
      line-height: var(--leading-input);
    }

    .field__input:focus + & {
      color: var(--color-accent-strong);
    }

    .field__input[aria-invalid="true"] + & {
      color: var(--color-loss);
    }
  }

  /* Rendered even when empty, at a fixed height, so the field below it does
     not jump when an error appears. */
  .field-error {
    min-block-size: 1.25rem;
    margin-block: var(--space-2xs);
    padding-inline: var(--space-sm);
    color: var(--color-loss);
    font-size: var(--text-meta);
    line-height: var(--leading-meta);
  }
}