/*
 ==============================================================================
 Project Name    : Esyasoft.BlazorKit
 File Name       : badge.css
 File Purpose    : Token-driven stylesheet for StatusBadge component.
 Created By      : Anmol Manocha
 Created Date    : 2026-11-03
 ==============================================================================
 MODIFICATION HISTORY:
 Date (YYYY-MM-DD) | Modified By       | Task / CR #  | Description of Changes
 ------------------------------------------------------------------------------
 2026-11-03        | Anmol Manocha     | BLAZORKIT-01 | Created token-driven stylesheet for StatusBadge.
 ------------------------------------------------------------------------------
*/

.uuc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--uuc-font-primary, sans-serif);
    font-weight: var(--uuc-font-weight-semibold, 600);
    line-height: 1.25;
    border: 1px solid transparent;
    box-sizing: border-box;
    white-space: nowrap;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Shapes */
.uuc-badge-shape-pill {
    border-radius: 9999px;
}

.uuc-badge-shape-rounded {
    border-radius: var(--uuc-btn-radius-sm, 4px);
}

/* Sizes */
.uuc-badge-size-sm {
    padding: 1px 6px;
    font-size: 10.5px;
}

.uuc-badge-size-md {
    padding: 2px 7.5px;
    font-size: 11.5px;
}

.uuc-badge-size-lg {
    padding: 4px 10px;
    font-size: 12.5px;
}

/* Text and Subtext */
.uuc-badge-text {
    display: inline-block;
}

.uuc-badge-sub {
    opacity: 0.75;
    font-size: 0.85em;
    font-weight: var(--uuc-font-weight-medium, 500);
}

/* Status Indicator Dot */
.uuc-badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.uuc-badge-dot-only {
    padding: 4px !important;
    gap: 0 !important;
}

.uuc-badge-dot-pulse {
    animation: uuc-badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes uuc-badge-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.85);
    }
}

/* Subtle Variant (Default: Soft background, colored text, faint border) */
.uuc-badge-subtle.uuc-badge-color-neutral {
    background-color: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.uuc-badge-subtle.uuc-badge-color-primary {
    background-color: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
}

.uuc-badge-subtle.uuc-badge-color-success {
    background-color: #ecfdf5;
    color: #047857;
    border-color: #d1fae5;
}

.uuc-badge-subtle.uuc-badge-color-warning {
    background-color: #fffbeb;
    color: #b45309;
    border-color: #fef3c7;
}

.uuc-badge-subtle.uuc-badge-color-danger {
    background-color: #fef2f2;
    color: #b91c1c;
    border-color: #fee2e2;
}

.uuc-badge-subtle.uuc-badge-color-info {
    background-color: #f0fdfa;
    color: #0f766e;
    border-color: #ccfbf1;
}

/* Solid Variant (High contrast filled background, white text) */
.uuc-badge-solid.uuc-badge-color-neutral {
    background-color: #64748b;
    color: #ffffff;
    border-color: transparent;
}

.uuc-badge-solid.uuc-badge-color-primary {
    background-color: #0284c7;
    color: #ffffff;
    border-color: transparent;
}

.uuc-badge-solid.uuc-badge-color-success {
    background-color: #059669;
    color: #ffffff;
    border-color: transparent;
}

.uuc-badge-solid.uuc-badge-color-warning {
    background-color: #d97706;
    color: #ffffff;
    border-color: transparent;
}

.uuc-badge-solid.uuc-badge-color-danger {
    background-color: #dc2626;
    color: #ffffff;
    border-color: transparent;
}

.uuc-badge-solid.uuc-badge-color-info {
    background-color: #0d9488;
    color: #ffffff;
    border-color: transparent;
}

/* Outline Variant (Transparent background, defined 1px colored border) */
.uuc-badge-outline.uuc-badge-color-neutral {
    background-color: transparent;
    color: #475569;
    border-color: #cbd5e1;
}

.uuc-badge-outline.uuc-badge-color-primary {
    background-color: transparent;
    color: #0284c7;
    border-color: #38bdf8;
}

.uuc-badge-outline.uuc-badge-color-success {
    background-color: transparent;
    color: #059669;
    border-color: #34d399;
}

.uuc-badge-outline.uuc-badge-color-warning {
    background-color: transparent;
    color: #b45309;
    border-color: #fbbf24;
}

.uuc-badge-outline.uuc-badge-color-danger {
    background-color: transparent;
    color: #dc2626;
    border-color: #f87171;
}

.uuc-badge-outline.uuc-badge-color-info {
    background-color: transparent;
    color: #0d9488;
    border-color: #2dd4bf;
}