/**
 * Badges Component
 *
 * Badge styles for status indicators and labels.
 * Includes variants: primary, success, warning, error
 */

/* ===== Badges ===== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-full);
}

.badge-primary {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--color-primary);
}

.badge-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
}

.badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.badge-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
}

/* ===== Difficulty Badges ===== */

.difficulty-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    gap: 0.25rem;
}

.difficulty-easy {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
}

.difficulty-medium {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.difficulty-hard {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
}

/* ===== File Type Badges (Material Library) ===== */

.badge-code {
    background-color: rgba(99, 102, 241, 0.1);
    color: rgb(99, 102, 241);
}

.badge-data {
    background-color: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
}

.badge-document {
    background-color: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
}

.badge-image {
    background-color: rgba(236, 72, 153, 0.1);
    color: rgb(236, 72, 153);
}

.badge-default {
    background-color: rgba(107, 114, 128, 0.1);
    color: rgb(107, 114, 128);
}