/* Pill-shaped inline labels and toggles: a static .pill (facts like store), a
   .pill-toggle (nav toggle with an --on active state), and a mono .chip. */

@layer components {
  .pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem var(--inline-space);
    border-radius: var(--radius-pill);
    background: var(--color-border-subtle);
    color: var(--color-ink);
    font-size: var(--text-x-small);
    font-weight: 600;

    /* Store pill: outlined on white so it reads as a different kind of fact
       than the sunken category badge. Becomes a link when store pages exist. */
    &.pill--store {
      background: var(--color-canvas);
      border: 1px solid var(--color-border);
    }
  }

  /* A pill-shaped toggle in a nav (category filters, comment-sort). The --on
     modifier marks the active choice. Consumers re-skin it by setting the
     --pill-* variables (Fizzy-style), never by re-declaring the properties, so
     a variant always wins without depending on stylesheet load order. */
  .pill-toggle {
    display: inline-flex;
    align-items: center;
    padding: var(--pill-padding, 0.25rem var(--inline-space));
    border-radius: var(--radius-pill);
    background: var(--pill-bg, var(--color-surface-sunken));
    color: var(--pill-color, var(--color-text-subtle));
    font-size: var(--text-x-small);
    font-weight: 600;

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-ink);
        text-decoration: none;
      }
    }

    &.pill-toggle--on {
      --pill-bg: var(--color-ink);
      --pill-color: var(--color-canvas);
    }
  }

  .chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    font-weight: 700;
    padding: 0.25rem var(--inline-space);
    border-radius: var(--radius-sm);
    background: var(--color-up-surface);
    color: var(--color-up);
  }
}