@layer components {
  .input {
    accent-color: var(--input-accent-color, var(--color-ink));
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: var(--input-border-radius, 0.5em);
    color: var(--color-ink);
    font-size: max(16px, 1em);
    inline-size: 100%;
    padding: var(--input-padding, 0.5em 0.8em);
    transition: border-color 100ms, box-shadow 100ms;

    &:focus {
      border-color: var(--color-link);
      outline: none;
      box-shadow: 0 0 0 2px oklch(var(--lch-blue-light) / 30%);
    }

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

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Prevent mobile Safari zoom on focus */
    @supports (-webkit-touch-callout: none) {
      font-size: max(16px, 1em);
    }
  }

  /* ── Select ── */
  .input--select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23666'/%3E%3C/svg%3E");
    background-position: right 0.8em center;
    background-repeat: no-repeat;
    background-size: 0.75em;
    padding-inline-end: 2em;
  }

  /* ── Textarea ── */
  .input--textarea {
    min-height: calc(3lh + 1em);
    resize: vertical;

    @supports (field-sizing: content) {
      field-sizing: content;
      min-height: calc(2lh + 1em);
    }
  }

  /* ── Switch ── */
  .switch {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    cursor: pointer;
  }

  .switch__input {
    appearance: none;
    background: var(--color-ink-lighter);
    border: none;
    border-radius: 1em;
    cursor: pointer;
    height: 1.5em;
    position: relative;
    transition: background-color 150ms ease;
    width: 2.75em;

    &::before {
      background: var(--color-white);
      border-radius: 50%;
      content: "";
      height: 1.2em;
      left: 0.15em;
      position: absolute;
      top: 0.15em;
      transition: transform 150ms ease;
      width: 1.2em;
    }

    &:checked {
      background: var(--color-link);

      &::before {
        transform: translateX(1.25em);
      }
    }
  }

  /* ── Checkbox ── */
  .checkbox {
    appearance: none;
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: var(--radius-small);
    cursor: pointer;
    height: 1.1em;
    width: 1.1em;
    transition: background-color 150ms, border-color 150ms;

    &:checked {
      background: var(--color-link);
      border-color: var(--color-link);
    }
  }

  /* ── Label ── */
  .label {
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 500;
    margin-block-end: 0.25em;
  }

  .label--hint {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    font-weight: 400;
  }
}