/*======================================================
    BADGE COMPONENTS
    HealthSurance Design System
======================================================*/

/*--------------------------------------
    Base Badge
--------------------------------------*/

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 18px;

    border-radius: 50px;

    font-size: .85rem;
    font-weight: 600;

    letter-spacing: .5px;
}

/*--------------------------------------
    Primary Badge
--------------------------------------*/

.badge-primary {

    background: rgba(15,98,254,.10);

    color: var(--primary);

}

/*--------------------------------------
    Secondary Badge
--------------------------------------*/

.badge-secondary {

    background: rgba(20,184,166,.12);

    color: var(--secondary);

}

/*--------------------------------------
    Success Badge
--------------------------------------*/

.badge-success {

    background: rgba(22,163,74,.12);

    color: var(--success);

}

/*--------------------------------------
    Warning Badge
--------------------------------------*/

.badge-warning {

    background: rgba(245,158,11,.15);

    color: var(--warning);

}

/*--------------------------------------
    Danger Badge
--------------------------------------*/

.badge-danger {

    background: rgba(220,38,38,.10);

    color: var(--danger);

}

/*--------------------------------------
    Outline Badge
--------------------------------------*/

.badge-outline {

    background: transparent;

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

    color: var(--text);

}

/*--------------------------------------
    Large Badge
--------------------------------------*/

.badge-large {

    padding: 12px 24px;

    font-size: .95rem;

}