@layer components {
  .input {
    --icon-size: var(--input-icon-size);

    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-5);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-field);
    background-color: var(--color-surface);
    color: var(--color-ink-faint);
    transition: border-color var(--dur-fast) var(--ease-calm);
  }

  .input__field {
    flex: auto;
    min-inline-size: var(--space-0);
    min-block-size: var(--tap-min);
    font: var(--type-body);
    color: var(--color-ink);
    outline: none;
  }

  .input:has(> .input__field:disabled) {
    background-color: var(--color-surface-sunken);
  }

  .input__field:disabled {
    color: var(--color-ink-faint);
    cursor: not-allowed;
  }

  .input__prefix,
  .input__suffix {
    font: var(--type-body);
    color: var(--color-ink-muted);
  }

  .input--select {
    position: relative;
  }

  select.input__field {
    appearance: none;
    padding-inline-end: var(--space-8);
    background-color: transparent;
    cursor: pointer;
  }

  .input--select > .icon {
    position: absolute;
    inset-inline-end: var(--space-5);
    pointer-events: none;
    color: var(--color-ink-faint);
  }

  .input__action {
    min-block-size: var(--tap-min);
    margin-inline-end: calc(var(--space-5) * -1);
    padding-inline: var(--space-5);
    font: var(--type-button);
    color: var(--color-link);
    -webkit-tap-highlight-color: transparent;
  }

  .input__action-hide,
  .input__action[aria-pressed="true"] .input__action-show {
    display: none;
  }

  .input__action[aria-pressed="true"] .input__action-hide {
    display: inline;
  }

  textarea.input__field {
    padding-block: var(--space-4);
    resize: vertical;
    text-wrap: pretty;
  }

  .input:has(> textarea) {
    align-items: stretch;
  }

  .input__field::placeholder {
    color: var(--color-ink-faint);
  }
}