@layer components {
  /* ——— Chips ———
     Plain by default. A tint is earned only when state has to be seen at a
     glance, and never more than one per row or card. */
  .badge {
    display: inline-block;
    /* A chip is shorter than a button (reference 02) but not flat: with no
       block padding at all it reads as bare text in a tint, and beside the
       .btn--quiet stages in .entry-stages it collapsed to half their height. */
    padding: var(--inline-space-half) var(--inline-space);
    font-size: var(--text-small);
    color: var(--color-ink-subtle);
    border: var(--border);
    border-radius: var(--border-radius);

    /* Filled ink: the one chip that anchors rather than annotates. It drops
       its hairline — the tint already bounds it — and carries a little weight,
       because it is the one mark the row raises. The feed's date wears it
       (dividers.css) because it is the datum every row under it hangs from,
       and BC draws it the same way — see HANSHI's Deviations. */
    &.badge--strong {
      font-weight: 500;
      color: var(--color-canvas);
      background-color: var(--color-ink);
      border-color: transparent;
    }

    /* Straw, the colour of waiting (HANSHI, Colour): a draft, until its
       writer posts it. Its tint with its paired ink, no hairline. */
    &.badge--waiting {
      color: var(--color-warning-ink);
      background-color: var(--color-warning-tint);
      border-color: transparent;
    }

    /* A chip that is a choice — a folder's filters — is a link or a button
       in the chip's own dress: no underline, the pointer's hairline. */
    &:is(a, button) {
      display: inline-flex;
      align-items: center;
      gap: var(--inline-space-half);
      font-family: inherit;
      line-height: inherit;
      text-decoration: none;
      background-color: transparent;
      cursor: pointer;

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

    /* The current one in a control like this is a selection, so it reads as
       mizu without the view having to say so twice. Off aria-current alone,
       whichever value the markup spells it with — settings.css:57 rules the
       same shape for the rail. A chip wrapping a checked input is the same
       selection said by the control itself (the day chips, day-picker.css). */
    &[aria-current],
    &:has(:checked) {
      font-weight: 500;
      color: var(--color-selected-ink);
      background-color: var(--color-selected);
      border-color: transparent;
    }

    /* A chip wrapping a real checkbox or radio is a control: a pointer
       target, with the focus ring on the chip once the input is off-screen
       (`.for-screen-reader` on it): the schedule's day chips. */
    &:has(input) {
      cursor: pointer;

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

      &:has(:focus-visible) {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
      }
    }
  }
}