@layer components {
  .input {
    accent-color: var(--input-accent-color, var(--color-ink));
    background-color: var(--input-background, transparent);
    border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
    border-radius: var(--radius);
    color: var(--input-color, var(--color-ink));
    font-size: max(16px, 1em);
    inline-size: 100%;
    line-height: inherit;
    padding: var(--input-padding, 0.5em 0.8em);
    resize: none;

    &:autofill {
      -webkit-text-fill-color: var(--color-ink);
      -webkit-box-shadow: 0 0 0 1000px var(--color-selected) inset;
    }

    &:where(:focus) {
      --focus-ring-offset: -1px;
    }

    &[autocomplete="one-time-code"] {
      font-family: var(--font-mono);
      font-size: var(--text-large);
      font-weight: 700;
      inline-size: 18ch;
      letter-spacing: 1ch;
      text-align: center;
    }
  }

  .input--select {
    --input-padding: 0.5em 1.8em 0.5em 1.2em;

    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.1em center, right 0.8em center;
    background-repeat: no-repeat;
    background-size: 0.3em 0.3em;

    option {
      background-color: var(--color-canvas);
      color: var(--color-ink);
    }
  }

  /* Numbers are short, so they don't stretch across the form */
  .input--number {
    display: block;
    max-inline-size: 16ch;
  }

  .input--color {
    --input-padding: 0.25em;

    block-size: 2.6em;
    cursor: pointer;
    display: block;
    inline-size: 6em;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    /* Separate rules, since a browser drops a whole selector list containing a pseudo-element it doesn't know */
    &::-webkit-color-swatch {
      border: 0;
    }

    &::-moz-color-swatch {
      border: 0;
    }
  }

  /* A group of related fields, such as an address, set in line with the fields around it under its legend */
  .fieldset {
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    margin: 0;
    min-inline-size: 0;
    padding: 0;

    legend {
      margin-block-end: var(--block-space-half);
      padding: 0;
    }
  }

  /* City, state, and ZIP code share a row where it fits, the city taking what's left */
  .address-locality {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half) var(--inline-space);
  }

  .address-locality__city {
    flex: 1 1 12rem;
  }

  .address-locality__state {
    flex: 0 0 5em;
  }

  /* Room for a ZIP+4, such as 62701-1234 */
  .address-locality__postal-code {
    flex: 0 0 9em;
  }

  .input--textarea {
    min-block-size: 3lh;

    @supports (field-sizing: content) {
      field-sizing: content;
    }
  }
}