/**
 * Badges — uk-badge + variantes de marca.
 * Componente: templates/front/component/badge.html
 * Tokens: styles.css (:root) — --badge-color-*, --border-primary, --text-*
 */

.uk-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-width: 0;
    padding: 0 var(--spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-text-xs);
    line-height: var(--line-height-text-xs);
    font-weight: 500;
    vertical-align: middle;
}

.uk-badge-primary {
    background-color: var(--badge-color-primary) !important;
    border-color: var(--badge-color-primary-border) !important;
    color: var(--color-primary) !important;
}

.uk-badge-secondary {
    background-color: var(--badge-color-secondary) !important;
    border-color: var(--badge-color-secondary-border) !important;
    color: var(--text-secondary) !important;
}

.uk-badge-tertiary {
    background-color: var(--badge-color-tertiary) !important;
    border-color: var(--badge-color-tertiary-border) !important;
    color: var(--text-tertiary) !important;
}

.uk-badge-outline {
    background-color: var(--color-white) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

.uk-badge-success {
    background-color: var(--badge-color-success) !important;
    border-color: var(--badge-color-success-border) !important;
    color: var(--badge-color-success-text) !important;
}

.uk-badge-danger {
    background-color: var(--badge-color-danger) !important;
    border-color: var(--badge-color-danger-border) !important;
    color: var(--badge-color-danger-text) !important;
}

.uk-badge-info {
    background-color: var(--badge-color-info) !important;
    border-color: var(--badge-color-info-border) !important;
    color: var(--badge-color-info-text) !important;
}

.uk-badge-warning {
    background-color: #FFFAEB !important;
    border-color: #FEDF89 !important;
    color: #B54708 !important;
}

.uk-badge[hidden] {
    display: none !important;
}

.uk-badge--dismissible {
    gap: 0;

    .uk-badge__label {
        min-width: 0;
    }

    .uk-badge__dismiss {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        line-height: 1;

        &:hover {
            opacity: 0.65;
        }

        .uk-icon-customiq {
            color: var(--text-tertiary) !important;
        }
    }
}