@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  .input {
    background-color: var(--input-background, var(--color-canvas));
    border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-border));
    border-radius: var(--input-border-radius, var(--border-radius));
    color: var(--color-ink);
    font-size: var(--input-font-size, var(--text-normal));
    inline-size: var(--input-inline-size, 100%);
    padding: var(--input-padding, 0.5em 0.75em);

    &::placeholder {
      color: var(--color-ink-muted);
    }

    /* A thicker ring reads better on a field than the default hairline */
    &:where(:focus-visible) {
      --focus-ring-color: var(--input-border-color, var(--color-link));
      --focus-ring-offset: 0px;

      --input-border-color: var(--color-link);
    }

    &:where([disabled]) {
      --input-background: var(--color-surface-subtle);
    }
  }

  .input--textarea {
    min-block-size: 6em;
    resize: vertical;
  }

  .input--file {
    color: var(--color-ink-muted);

    &::file-selector-button {
      background-color: var(--color-surface-subtle);
      border: var(--border);
      border-radius: var(--border-radius);
      color: var(--color-ink);
      cursor: pointer;
      font: inherit;
      font-size: var(--text-small);
      font-weight: 500;
      margin-inline-end: var(--inline-space);
      padding: 0.3em 0.75em;
    }

    @media (any-hover: hover) {
      &::file-selector-button:hover {
        border-color: var(--color-border-strong);
      }
    }
  }

  .input--invalid {
    --input-border-color: var(--color-negative);
  }
}