/*
 * Desenvolvido por RuthesDev
 * https://ruthes.dev
 * Refatorado para suportar Sistema de Design (Variants + Appearances)
 */

/* =========================================
   BASE COMPONENT
   ========================================= */

.ym-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25em 0.75em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 9999px;
    /* Pill */
    white-space: nowrap;
    text-transform: capitalize;
    /* Ou uppercase se preferir */
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    text-decoration: none !important;
    gap: 0.4em;
    /* Space between icon and text */
    border: 1px solid transparent;
    /* Prevents layout shift on outline */

    /* Default Colors */
    --badge-base: #64748b;
    --badge-fg: #ffffff;
}

/* SVG / Icon Support */
.ym-badge svg,
.ym-badge .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
    display: block;
    fill: currentColor;
}

/* =========================================
   VARIANTS (INTENT COLORS)
   Define as variáveis de cor para cada variante
   ========================================= */

/* Primary */
.ym-badge-primary {
    --badge-base: var(--wp--preset--color--primary, #0066CC);
}

/* Secondary */
.ym-badge-secondary {
    --badge-base: var(--wp--preset--color--secondary, #475569);
}

/* Success */
.ym-badge-success {
    --badge-base: #10b981;
    /* Emerald 500 */
}

/* Warning */
.ym-badge-warning {
    --badge-base: #f59e0b;
    /* Amber 500 */
}

/* Info */
.ym-badge-info {
    --badge-base: #3b82f6;
    /* Blue 500 */
}

/* Destructive */
.ym-badge-destructive {
    --badge-base: #ef4444;
    /* Red 500 */
}

/* =========================================
   APPEARANCES (STYLES)
   Usa a variável --badge-base definida acima
   ========================================= */

/* 1. SOLID (Default) */
/* Se não tiver modifiers de appearance, é solido */
.ym-badge:not(.ym-badge-outline):not(.ym-badge-light):not(.ym-badge-ghost) {
    background-color: var(--badge-base);
    color: var(--badge-fg);
    border-color: var(--badge-base);
}

.ym-badge:not(.ym-badge-outline):not(.ym-badge-light):not(.ym-badge-ghost):hover {
    filter: brightness(110%);
}

/* 2. OUTLINE */
.ym-badge-outline {
    background-color: transparent;
    color: var(--badge-base);
    border-color: var(--badge-base);
}

.ym-badge-outline:hover {
    background-color: var(--badge-base);
    color: var(--badge-fg);
}

/* 3. LIGHT (Soft / Pastel) */
.ym-badge-light {
    background-color: color-mix(in srgb, var(--badge-base), white 85%);
    color: color-mix(in srgb, var(--badge-base), black 20%);
    border-color: transparent;
}

.ym-badge-light:hover {
    background-color: color-mix(in srgb, var(--badge-base), white 70%);
}

/* 4. GHOST */
.ym-badge-ghost {
    background-color: transparent;
    color: var(--badge-base);
    border-color: transparent;
}

.ym-badge-ghost:hover {
    background-color: color-mix(in srgb, var(--badge-base), white 85%);
}

/* =========================================
   WORDPRESS INTEGRATION (Category Lists)
   ========================================= */

.ym-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ym-badge-list a {
    /* Herda o estilo base do badge */
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.75em;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 9999px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s ease;

    /* Default appearance for WP Categories: Light Primary */
    --badge-base: var(--wp--preset--color--primary, #0066CC);
    background-color: color-mix(in srgb, var(--badge-base), white 90%);
    color: var(--badge-base);
    border: 1px solid transparent;
}

.ym-badge-list a:hover {
    /* Hover style: Subtle Glow (Light) */
    background-color: color-mix(in srgb, var(--badge-base), white 80%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-base), transparent 70%);
}