/*
 * ss-chip — Status pills, tags, badges
 *
 * Base is neutral. Variants apply semantic color.
 *
 * Variants:
 *   --success, --warning, --danger, --info, --accent    (semantic backgrounds)
 *   --outline                                            (transparent bg + colored border)
 *   --solid                                              (solid semantic bg + white text)
 *
 * Sizes: --sm (default), --md
 */

.ss-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);

    padding: 2px var(--space-2);
    min-height: 20px;

    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;

    background: var(--bg-card-dim);
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

/* ── Semantic variants (soft bg + colored text) ───────────────── */

.ss-chip--success { background: var(--success-soft); color: var(--success); }
.ss-chip--warning { background: var(--warning-soft); color: var(--warning); }
.ss-chip--danger  { background: var(--danger-soft);  color: var(--danger); }
.ss-chip--info    { background: var(--info-soft);    color: var(--info); }
.ss-chip--accent  { background: var(--accent-soft);  color: var(--accent-text); }

/* ── Outline variant ──────────────────────────────────────────── */

.ss-chip--outline {
    background: transparent;
}
.ss-chip--outline.ss-chip--success { border-color: var(--success); color: var(--success); }
.ss-chip--outline.ss-chip--warning { border-color: var(--warning); color: var(--warning); }
.ss-chip--outline.ss-chip--danger  { border-color: var(--danger);  color: var(--danger); }
.ss-chip--outline.ss-chip--info    { border-color: var(--info);    color: var(--info); }
.ss-chip--outline.ss-chip--accent  { border-color: var(--accent);  color: var(--accent); }

/* ── Solid variant (strong bg, white text) ────────────────────── */

.ss-chip--solid { color: #fff; }
.ss-chip--solid.ss-chip--success { background: var(--success); }
.ss-chip--solid.ss-chip--warning { background: var(--warning); }
.ss-chip--solid.ss-chip--danger  { background: var(--danger); }
.ss-chip--solid.ss-chip--info    { background: var(--info); }
.ss-chip--solid.ss-chip--accent  { background: var(--accent); }

/* ── Sizes ────────────────────────────────────────────────────── */

.ss-chip--md {
    padding: var(--space-1) var(--space-3);
    min-height: 24px;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
}

/* ── Removable chip (has close icon) ──────────────────────────── */

.ss-chip__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    margin-left: var(--space-1);
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.ss-chip__close:hover { opacity: 1; }