@layer components {

    /* Badge — small status indicators with icons or values */
    .badge {
        --badge-size: 1.75em;
        --badge-color: var(--color-surface-hover);
        --badge-text: var(--color-text-subtle);

        aspect-ratio: 1;
        background-color: var(--badge-color);
        block-size: var(--badge-size);
        border-radius: 50%;
        color: var(--badge-text);
        display: grid;
        flex-shrink: 0;
        inline-size: var(--badge-size);
        place-items: center;
    }

    /* Status modifiers */
    .badge--good {
        --badge-color: oklch(var(--lch-green-medium));
        --badge-text: white;
    }

    .badge--minor {
        --badge-color: oklch(var(--lch-yellow-medium));
        --badge-text: white;
    }

    .badge--major {
        --badge-color: oklch(var(--lch-red-medium));
        --badge-text: white;
    }

    /* Pill variant for numerical values */
    .badge--pill {
        aspect-ratio: unset;
        block-size: auto;
        border-radius: 1em;
        font-size: var(--font-size-small);
        inline-size: auto;
        padding-block: 0.15em;
        padding-inline: 0.75em;
        white-space: nowrap;
    }
}