/**
 * GiftCodeNgon - Badge Components
 * 
 * Status badges and labels
 * @version 1.0.0
 */

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

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* ========================================
   BADGE VARIANTS
   ======================================== */

/* Default / Neutral */
.badge-default {
    color: var(--color-text-secondary);
    background-color: var(--color-surface);
}

/* Primary */
.badge-primary {
    color: white;
    background-color: var(--color-primary);
}

/* Success / Verified / Active */
.badge-success {
    color: #4ade80;
    /* Green-400 */
    background-color: var(--color-success-light);
    border: 1px solid var(--color-success-border);
}

/* Warning / Expiring Soon */
.badge-warning {
    color: #fef08a;
    /* Yellow-200 */
    background-color: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
}

/* Danger / Expired */
.badge-danger {
    color: var(--color-danger);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger-border);
}

/* Hot */
.badge-hot {
    color: white;
    background-color: #f97316;
    /* Orange-500 */
}

/* New */
.badge-new {
    color: white;
    background-color: var(--color-success);
}

/* Event */
.badge-event {
    color: white;
    background-color: #a855f7;
    /* Purple-500 */
}

/* ========================================
   BADGE WITH ANIMATION
   ======================================== */

.badge-pulse {
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

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

.status-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.status-dot::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.status-dot-active {
    color: var(--color-success);
}

.status-dot-expiring {
    color: var(--color-warning);
}

.status-dot-expired {
    color: var(--color-danger);
}

/* ========================================
   TAG BADGE
   ======================================== */

.tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background-color: var(--color-surface);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.tag:hover {
    color: white;
    background-color: var(--color-primary);
}