@layer components {
  .badge {
    --badge-color: var(--color-text-muted);

    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2em 0.65em;
    border-radius: var(--radius-full);
    background-color: color-mix(in oklab, var(--badge-color) 13%, transparent);
    color: color-mix(in oklab, var(--badge-color), var(--color-text) 25%);
    font-size: var(--step--1);
    font-weight: 560;
    line-height: 1.4;
    white-space: nowrap;

    /* Status dot */
    &.badge--dot::before {
      content: "";
      inline-size: 0.45em;
      block-size: 0.45em;
      border-radius: var(--radius-full);
      background-color: var(--badge-color);
    }
  }

  .badge--accent  { --badge-color: var(--color-accent); }
  .badge--success { --badge-color: var(--color-success); }
  .badge--warning { --badge-color: var(--color-warning); }
  .badge--danger  { --badge-color: var(--color-danger); }
}