/* ==========================================================
   ADMIN CSS FRAMEWORK
   File : components/status-badge.css
   Purpose : Professional Status Badge System
========================================================== */


/* ==========================================================
   BASE STATUS BADGE
========================================================== */

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-width:90px;

    min-height:32px;

    padding:
        var(--status-padding-y)
        var(--status-padding-x);

    border:1px solid transparent;

    border-radius:var(--status-radius);

    background:transparent;

    color:inherit;

    font-size:var(--status-font-size);

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

    line-height:1;

    text-align:center;

    white-space:nowrap;

    vertical-align:middle;

    user-select:none;

    transition:var(--transition);

}

.status-badge i{

    font-size:11px;

    line-height:1;

}

.status-badge:hover{

    transform:translateY(-1px);

}

.status-badge:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:2px;

}


/* ==========================================================
   ACTIVE
========================================================== */

.status-active{

    background:var(--status-active-bg);

    color:var(--status-active-color);

    border-color:var(--status-active-border);

}


/* ==========================================================
   PENDING
========================================================== */

.status-pending{

    background:var(--status-pending-bg);

    color:var(--status-pending-color);

    border-color:var(--status-pending-border);

}


/* ==========================================================
   PROCESSING
========================================================== */

.status-processing{

    background:var(--status-processing-bg);

    color:var(--status-processing-color);

    border-color:var(--status-processing-border);

}


/* ==========================================================
   COMPLETE
========================================================== */

.status-complete{

    background:var(--status-complete-bg);

    color:var(--status-complete-color);

    border-color:var(--status-complete-border);

}


/* ==========================================================
   INACTIVE
========================================================== */

.status-inactive{

    background:var(--status-inactive-bg);

    color:var(--status-inactive-color);

    border-color:var(--status-inactive-border);

}


/* ==========================================================
   CANCEL
========================================================== */

.status-cancel{

    background:var(--status-cancel-bg);

    color:var(--status-cancel-color);

    border-color:var(--status-cancel-border);

}


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

.status-success{

    background:var(--status-success-bg);

    color:var(--status-success-color);

    border-color:var(--status-success-border);

}


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

.status-info{

    background:var(--status-info-bg);

    color:var(--status-info-color);

    border-color:var(--status-info-border);

}


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

.status-warning{

    background:var(--status-warning-bg);

    color:var(--status-warning-color);

    border-color:var(--status-warning-border);

}


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

.status-danger{

    background:var(--status-danger-bg);

    color:var(--status-danger-color);

    border-color:var(--status-danger-border);

}


/* ==========================================================
   DARK
========================================================== */

.status-dark{

    background:var(--status-dark-bg);

    color:var(--status-dark-color);

    border-color:var(--status-dark-border);

}


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

.status-light{

    background:var(--status-light-bg);

    color:var(--status-light-color);

    border-color:var(--status-light-border);

}


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

.status-outline-primary{

    background:transparent;

    color:var(--primary);

    border-color:var(--primary);

}

.status-outline-success{

    background:transparent;

    color:var(--status-success-color);

    border-color:var(--status-success-border);

}

.status-outline-warning{

    background:transparent;

    color:var(--status-warning-color);

    border-color:var(--status-warning-border);

}

.status-outline-danger{

    background:transparent;

    color:var(--status-danger-color);

    border-color:var(--status-danger-border);

}

.status-outline-info{

    background:transparent;

    color:var(--status-info-color);

    border-color:var(--status-info-border);

}


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

.status-sm{

    min-width:72px;

    min-height:26px;

    padding:4px 10px;

    font-size:11px;

}

.status-lg{

    min-width:110px;

    min-height:38px;

    padding:8px 16px;

    font-size:13px;

}


/* ==========================================================
   SHAPE
========================================================== */

.status-pill{

    border-radius:999px;

}

.status-square{

    border-radius:6px;

}


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

.status-disabled{

    opacity:.6;

    pointer-events:none;

}


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

.status-dot{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:600;

    color:var(--text);

}

.status-dot::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:currentColor;

}

.status-dot.active{

    color:var(--status-success-color);

}

.status-dot.pending{

    color:var(--status-warning-color);

}

.status-dot.processing{

    color:var(--status-info-color);

}

.status-dot.inactive{

    color:var(--status-inactive-color);

}

.status-dot.cancel{

    color:var(--status-danger-color);

}


/* ==========================================================
   PULSE
========================================================== */

.status-pulse{

    position:relative;

}

.status-pulse::after{

    content:"";

    position:absolute;

    inset:-2px;

    border:2px solid currentColor;

    border-radius:inherit;

    opacity:.35;

    animation:statusPulse 1.8s infinite;

}

@keyframes statusPulse{

    from{

        transform:scale(1);

        opacity:.45;

    }

    to{

        transform:scale(1.25);

        opacity:0;

    }

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .status-badge{

        min-width:76px;

        min-height:30px;

        font-size:11px;

    }

}

@media (max-width:576px){

    .status-badge{

        min-width:68px;

        min-height:28px;

        padding:4px 10px;

        gap:4px;

        font-size:10px;

    }

}