/* ==========================================================
   SPACE UI KIT
   BADGE COMPONENT
========================================================== */

.ui-badge {
    --badge-bg: rgba(57, 217, 255, 0.10);
    --badge-border: rgba(57, 217, 255, 0.35);
    --badge-color: var(--accent-cyan);

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 24px;

    padding: 0 9px;

    box-sizing: border-box;

    border: 1px solid var(--badge-border);

    border-radius: 4px;

    background: var(--badge-bg);

    color: var(--badge-color);

    font-family: var(--font-family-mono);

    font-size: 9px;

    font-weight: var(--weight-bold);

    letter-spacing: 0.09em;

    line-height: 1;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================
   MARKER
========================================================== */

.ui-badge__marker {
    width: 5px;
    height: 5px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: currentColor;

    box-shadow:
        0 0 6px currentColor;
}


/* ==========================================================
   DEFAULT
========================================================== */

.ui-badge--default {
    --badge-bg: rgba(57, 217, 255, 0.10);
    --badge-border: rgba(57, 217, 255, 0.35);
    --badge-color: var(--accent-cyan);
}


/* ==========================================================
   SUCCESS
========================================================== */

.ui-badge--success {
    --badge-bg: rgba(101, 230, 164, 0.10);
    --badge-border: rgba(101, 230, 164, 0.38);
    --badge-color: var(--accent-green);
}


/* ==========================================================
   WARNING
========================================================== */

.ui-badge--warning {
    --badge-bg: rgba(255, 200, 87, 0.10);
    --badge-border: rgba(255, 200, 87, 0.38);
    --badge-color: var(--accent-yellow);
}


/* ==========================================================
   DANGER
========================================================== */

.ui-badge--danger {
    --badge-bg: rgba(255, 102, 120, 0.10);
    --badge-border: rgba(255, 102, 120, 0.38);
    --badge-color: var(--accent-red);
}


/* ==========================================================
   SPECIAL
========================================================== */

.ui-badge--special {
    --badge-bg: rgba(180, 140, 255, 0.10);
    --badge-border: rgba(180, 140, 255, 0.38);
    --badge-color: var(--accent-violet);
}


/* ==========================================================
   NEUTRAL
========================================================== */

.ui-badge--neutral {
    --badge-bg: rgba(150, 175, 195, 0.08);
    --badge-border: rgba(150, 175, 195, 0.25);
    --badge-color: var(--accent-gray);
}


/* ==========================================================
   COUNT
========================================================== */

.ui-badge--count {
    min-width: 22px;
    height: 22px;
    min-height: 22px;

    padding: 0 6px;

    border-radius: 999px;

    font-size: 9px;
}


/* ==========================================================
   DOT
========================================================== */

.ui-badge--dot {
    width: 9px;
    height: 9px;

    min-width: 9px;
    min-height: 9px;

    padding: 0;

    border-radius: 50%;

    border-width: 1px;
}


.ui-badge--dot .ui-badge__marker {
    width: 3px;
    height: 3px;
}


/* ==========================================================
   SMALL
========================================================== */

.ui-badge--sm {
    min-height: 20px;

    padding: 0 7px;

    font-size: 8px;
}


/* ==========================================================
   LARGE
========================================================== */

.ui-badge--lg {
    min-height: 30px;

    padding: 0 12px;

    font-size: 10px;
}


/* ==========================================================
   GLOW
========================================================== */

.ui-badge--glow {
    box-shadow:
        0 0 10px color-mix(
            in srgb,
            var(--badge-color) 25%,
            transparent
        );
}


/* ==========================================================
   RARITY
========================================================== */

.ui-badge--common {
    --badge-color: var(--accent-gray);
    --badge-border: rgba(154, 175, 191, 0.28);
    --badge-bg: rgba(154, 175, 191, 0.07);
}


.ui-badge--rare {
    --badge-color: var(--accent-cyan);
    --badge-border: rgba(57, 217, 255, 0.38);
    --badge-bg: rgba(57, 217, 255, 0.09);
}


.ui-badge--epic {
    --badge-color: var(--accent-violet);
    --badge-border: rgba(180, 140, 255, 0.42);
    --badge-bg: rgba(180, 140, 255, 0.10);
}


.ui-badge--legendary {
    --badge-color: var(--accent-yellow);
    --badge-border: rgba(255, 200, 87, 0.42);
    --badge-bg: rgba(255, 200, 87, 0.10);
}


/* ==========================================================
   DISABLED
========================================================== */

.ui-badge--disabled {
    opacity: 0.38;
}