@layer components {
/* Badge — notification count or status dot. Figma node 1953:4039.
   Two render modes, picked by the partial based on the `number` prop:

     count   <span class="psw-badge psw-badge--count">8</span>
     dot     <span class="psw-badge psw-badge--dot psw-badge--dot-sm"></span>

   Both modes share the red fill, 2px white border, and pill radius. */

.psw-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-negative);                       /* Figma: Status/bg-negative (#e11900) */
    border: var(--border-width-md) solid var(--color-border-subtle);  /* Figma: 2px Border/border-subtle (white) */
    border-radius: var(--radius-max);
    color: var(--color-border-subtle);                                /* Figma: white text */
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-12);
    line-height: var(--line-height-16);
    white-space: nowrap;
}

/* --- count: pill with number text -------------------------------------- */

/* Figma node 1953:4039 — 24px tall pill, 10px horizontal padding.
   With box-sizing: border-box: height (24) = 2px border + 20px inner content
   area; the 16px line-height centers within that via inline-flex align-items.
   Vertical padding is therefore 0 — adding any would push total height above
   the 24px Figma target. The 10px horizontal is unique to the badge (other
   components use --space-2 = 8px for "padding-small"); inlined here rather
   than minting a new token. */
.psw-badge--count {
    height: 24px;
    padding: 0 10px;
}

/* --- dot: fixed-diameter circle ---------------------------------------- */

.psw-badge--dot      { padding: 0; }
.psw-badge--dot-sm   { width: 12px; height: 12px; }
.psw-badge--dot-md   { width: 16px; height: 16px; }
}