/**
 * Badge Component Styles
 * 숨카(SUMCAR) 프로젝트
 */

/* ========================================
   Badge Base
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    font-size: 13px;
    font-size: var(--fs-caption, 13px);
    font-weight: 600;
    font-weight: var(--fw-semibold, 600);
    line-height: 1.3;
    border-radius: 9999px;
    border-radius: var(--radius-full, 9999px);
    white-space: nowrap;
    vertical-align: middle;
}

/* ========================================
   Badge Variants
   ======================================== */

/* Primary */
.badge--primary {
    background-color: #00B8C6;
    background-color: var(--c-primary, #00B8C6);
    color: #FFFFFF;
}

/* Success */
.badge--success {
    background-color: #10B981;
    background-color: var(--c-success, #10B981);
    color: #FFFFFF;
}

/* Warning */
.badge--warning {
    background-color: #F59E0B;
    background-color: var(--c-warning, #F59E0B);
    color: #FFFFFF;
}

/* Error */
.badge--error {
    background-color: #EF4444;
    background-color: var(--c-error, #EF4444);
    color: #FFFFFF;
}

/* Info */
.badge--info {
    background-color: #3B82F6;
    background-color: var(--c-info, #3B82F6);
    color: #FFFFFF;
}

/* Neutral */
.badge--neutral {
    background-color: #6B7280;
    background-color: var(--c-text-disabled, #6B7280);
    color: #FFFFFF;
}

/* ========================================
   Badge Sizes
   ======================================== */

/* Small */
.badge--small {
    padding: 2px 8px;
    font-size: 11px;
}

/* Large */
.badge--large {
    padding: 6px 16px;
    font-size: 14px;
    font-size: var(--fs-small, 14px);
}

/* ========================================
   Special Badge Types
   ======================================== */

/* File Badge */
.badge--file {
    font-family: monospace;
    letter-spacing: 0.5px;
}

/* Status Badge */
.badge--status {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Count Badge (알림 등) */
.badge--count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    font-weight: var(--fw-bold, 700);
}

/* New Badge */
.badge--new {
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Hot Badge */
.badge--hot {
    position: relative;
    animation: badge-shake 0.5s ease-in-out infinite;
}

@keyframes badge-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

/* ========================================
   Badge Outline Variants
   ======================================== */

/* Primary Outline */
.badge--primary-outline {
    background-color: transparent;
    color: #00B8C6;
    color: var(--c-primary, #00B8C6);
    border: 1px solid #00B8C6;
    border: 1px solid var(--c-primary, #00B8C6);
}

/* Success Outline */
.badge--success-outline {
    background-color: transparent;
    color: #10B981;
    color: var(--c-success, #10B981);
    border: 1px solid #10B981;
    border: 1px solid var(--c-success, #10B981);
}

/* Warning Outline */
.badge--warning-outline {
    background-color: transparent;
    color: #F59E0B;
    color: var(--c-warning, #F59E0B);
    border: 1px solid #F59E0B;
    border: 1px solid var(--c-warning, #F59E0B);
}

/* Error Outline */
.badge--error-outline {
    background-color: transparent;
    color: #EF4444;
    color: var(--c-error, #EF4444);
    border: 1px solid #EF4444;
    border: 1px solid var(--c-error, #EF4444);
}

/* ========================================
   Badge Dot (앞에 점 표시)
   ======================================== */
.badge--dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* ========================================
   Badge in Context
   ======================================== */

/* 카드 헤더의 배지 */
.card__header .badge {
    margin-left: auto;
}

/* 버튼 내부 배지 */
.btn .badge {
    margin-left: 8px;
    margin-left: var(--space-8, 8px);
}

/* 제목 옆 배지 */
h1 .badge,
h2 .badge,
h3 .badge {
    margin-left: 12px;
    margin-left: var(--space-12, 12px);
    vertical-align: middle;
}

/* ========================================
   Badge Group
   ======================================== */
.badge-group {
    display: inline-flex;
    gap: 8px;
    gap: var(--space-8, 8px);
    flex-wrap: wrap;
}

/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .badge--new,
    .badge--hot {
        animation: none;
    }
}

/* ========================================
   Mobile Adjustments
   ======================================== */
@media (max-width: 767px) {
    .badge {
        font-size: 12px;
        padding: 3px 10px;
    }

    .badge--small {
        font-size: 10px;
        padding: 2px 6px;
    }
}