/* Small mono-uppercase status tag (category, author, active/dead, featured). */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.75ch;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    color: var(--color-text-subtle);

    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    &.badge--active {
      background: var(--color-up-surface);
      color: var(--color-up);
    }

    &.badge--dead {
      background: var(--color-down-surface);
      color: var(--color-down);
    }

    &.badge--cat {
      background: var(--color-surface-sunken);
      color: var(--color-text-subtle);
    }

    /* --color-down is the same red as --color-primary in light, lifted for AA on the dark chip. */
    &.badge--author {
      background: var(--color-mist);
      color: var(--color-down);
    }

    /* Admin-pinned to the front page; gold echoes the hero pin treatment. */
    &.badge--featured {
      background: var(--color-surface-sunken);
      color: var(--color-featured);
    }
  }

  @media (any-hover: hover) {
    a.badge--cat:hover {
      background: var(--tint-ink-10);
      color: var(--color-ink);
      text-decoration: none;
    }
  }
}