/*
==================================================
SPI UI Framework
Component : Badge
Version   : 1.0.0
Author    : StudioProjectID
==================================================
*/

/*==================================================
BASE
==================================================*/

.spi-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:28px;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    line-height:1;

    white-space:nowrap;

    user-select:none;

}

/*==================================================
SIZE
==================================================*/

.spi-badge-sm{

    min-height:22px;

    padding:4px 10px;

    font-size:11px;

}

.spi-badge-lg{

    min-height:34px;

    padding:8px 16px;

    font-size:13px;

}

/*==================================================
PRIMARY
==================================================*/

.spi-badge-primary{

    background:rgba(34,197,94,.12);

    color:var(--spi-primary);

}

/*==================================================
SECONDARY
==================================================*/

.spi-badge-secondary{

    background:#F1F5F9;

    color:#475569;

}

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

.spi-badge-success{

    background:#DCFCE7;

    color:#166534;

}

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

.spi-badge-warning{

    background:#FEF3C7;

    color:#92400E;

}

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

.spi-badge-danger{

    background:#FEE2E2;

    color:#991B1B;

}

/*==================================================
INFO
==================================================*/

.spi-badge-info{

    background:#DBEAFE;

    color:#1D4ED8;

}

/*==================================================
LIGHT
==================================================*/

.spi-badge-light{

    background:#F8FAFC;

    color:#64748B;

}

/*==================================================
OUTLINE
==================================================*/

.spi-badge-outline{

    background:#FFFFFF;

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

    color:var(--spi-text);

}

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

.spi-badge-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:currentColor;

}

/*==================================================
ROUNDED
==================================================*/

.spi-badge-rounded{

    border-radius:8px;

}

/*==================================================
ICON
==================================================*/

.spi-badge svg,

.spi-badge i{

    width:14px;

    height:14px;

}