/*
  Wojo Framework 4.0 — Badge
  Namespace prefix: .wf-badge
  Requires: wf-layout.css, wf-colors.css

  Usage:
    <span class="wf-badge">Default</span>
    <span class="wf-badge wf-badge-primary">Primary</span>
    <span class="wf-badge wf-badge-positive wf-badge-outlined">Outlined</span>
    <span class="wf-badge wf-badge-primary wf-badge-pill">Pill</span>
    <span class="wf-badge wf-badge-negative wf-badge-pulse">9</span>

  Button attachment (auto top-right positioning):
    <button class="wf-btn wf-btn-secondary" style="position:relative;">
      Inbox <span class="wf-badge wf-badge-primary wf-badge-attached">4</span>
    </button>
*/
/* ── Base ── */
.wf-badge {
    --_badge-gap-default: 0.375rem;
    --_badge-gap: var(--_badge-gap-default);
    display: inline-flex;
    align-items: center;
    gap: var(--_badge-gap);
    padding: .375em .5rem;
    transition: all .2s ease-in-out;
    background-color: var(--wf-surface-subtle);
    border: 1px solid transparent;
    border-radius: var(--wf-radius-badge, var(--wf-radius-2));
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1rem;
    color: var(--wf-text);
    text-decoration: none;
    white-space: nowrap;
}
.wf-badge:hover {
    filter: brightness(0.95);
}
/* ── Shape ── */
.wf-badge-pill {
    border-radius: 999rem;
}
/* Keep badge spacing local unless wf-gap utility is explicitly applied to the badge itself. */
.wf-badge.wf-gap,
.wf-badge[class^="wf-gap-"],
.wf-badge[class*=" wf-gap-"] {
    --_badge-gap: var(--wf-gap, var(--_badge-gap-default));
}
.wf-badge-text {
    --_badge-gap-default: .5rem;
    padding: .25rem;
    white-space: normal;
}
.wf-badge-text:has(> i.icon:last-child) {
    padding-inline-end: .875rem;
}
.wf-badge-text:has(> i.icon:first-child) {
    padding-inline-start: .875rem;
}
/* ── Attached to a button (top-right corner) ── */
.wf-badge-attached {
    inset-block-start: -0.5em;
    inset-inline-end: -0.5em;
    position: absolute;
    z-index: 1;
}
/* ── Attention animations ── */

/* Register as a typed color so the browser can interpolate it in @keyframes */
@property --_pulse-color {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(95, 65, 251, 0.4);
}

@keyframes wf-badge-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--_pulse-color, rgba(95, 65, 251, 0.6));
    }
    70% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--_pulse-color), transparent 100%);
    }
    100% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--_pulse-color), transparent 100%);
    }
}
@keyframes wf-badge-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30%);
    }
    60% {
        transform: translateY(-15%);
    }
}
.wf-badge-pulse {
    animation: wf-badge-pulse 1.5s ease-in-out infinite;
}
.wf-badge-bounce {
    animation: wf-badge-bounce 1s ease infinite;
}
/* ══════════════════════════════════════════════════════
   Color variants — filled (default), outlined, plain
   ══════════════════════════════════════════════════════ */
.wf-badge-outlined{
    border-color: var(--wf-border);
}
/* ── PRIMARY ── */
.wf-badge-primary {
    --_pulse-color: var(--primary-color);
    background-color: var(--primary-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-primary.wf-badge-outlined {
    background-color: var(--primary-color-inverted);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.wf-badge-primary.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary-color);
}
/* ── SECONDARY ── */
.wf-badge-secondary {
    --_pulse-color: var(--secondary-color);
    background-color: var(--secondary-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-secondary.wf-badge-outlined {
    background-color: var(--secondary-color-inverted);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}
.wf-badge-secondary.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--secondary-color);
}
/* ── POSITIVE ── */
.wf-badge-positive {
    --_pulse-color: var(--positive-color);
    background-color: var(--positive-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-positive.wf-badge-outlined {
    background-color: var(--positive-color-inverted);
    border-color: var(--positive-color);
    color: var(--positive-color);
}
.wf-badge-positive.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--positive-color);
}
/* ── NEGATIVE ── */
.wf-badge-negative {
    --_pulse-color: var(--negative-color);
    background-color: var(--negative-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-negative.wf-badge-outlined {
    background-color: var(--negative-color-inverted);
    border-color: var(--negative-color);
    color: var(--negative-color);
}
.wf-badge-negative.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--negative-color);
}
/* ── ALERT ── */
.wf-badge-alert {
    --_pulse-color: var(--alert-color);
    background-color: var(--alert-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-alert.wf-badge-outlined {
    background-color: var(--alert-color-inverted);
    border-color: var(--alert-color);
    color: var(--alert-color);
}
.wf-badge-alert.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--alert-color);
}
/* ── INFO ── */
.wf-badge-info {
    --_pulse-color: var(--info-color);
    background-color: var(--info-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-info.wf-badge-outlined {
    background-color: var(--info-color-inverted);
    border-color: var(--info-color);
    color: var(--info-color);
}
.wf-badge-info.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--info-color);
}
/* ── SAGE ── */
.wf-badge-sage {
    --_pulse-color: var(--sage-color);
    background-color: var(--sage-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-sage.wf-badge-outlined {
    background-color: var(--sage-color-inverted);
    border-color: var(--sage-color);
    color: var(--sage-color);
}
.wf-badge-sage.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--sage-color);
}
/* ── INDIGO ── */
.wf-badge-indigo {
    background-color: var(--indigo-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-indigo.wf-badge-outlined {
    background-color: var(--indigo-color-inverted);
    border-color: var(--indigo-color);
    color: var(--indigo-color);
}
.wf-badge-indigo.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--indigo-color);
}
/* ── EARTH ── */
.wf-badge-earth {
    background-color: var(--earth-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-earth.wf-badge-outlined {
    background-color: var(--earth-color-inverted);
    border-color: var(--earth-color);
    color: var(--earth-color);
}
.wf-badge-earth.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--earth-color);
}
/* ── FOREST ── */
.wf-badge-forest {
    background-color: var(--forest-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-forest.wf-badge-outlined {
    background-color: var(--forest-color-inverted);
    border-color: var(--forest-color);
    color: var(--forest-color);
}
.wf-badge-forest.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--forest-color);
}
/* ── PLUM ── */
.wf-badge-plum {
    background-color: var(--plum-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-plum.wf-badge-outlined {
    background-color: var(--plum-color-inverted);
    border-color: var(--plum-color);
    color: var(--plum-color);
}
.wf-badge-plum.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--plum-color);
}
/* ── LAVENDER ── */
.wf-badge-lavender {
    background-color: var(--lavender-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-lavender.wf-badge-outlined {
    background-color: var(--lavender-color-inverted);
    border-color: var(--lavender-color);
    color: var(--lavender-color);
}
.wf-badge-lavender.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--lavender-color);
}
/* ── DUSK ── */
.wf-badge-dusk {
    background-color: var(--dusk-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-dusk.wf-badge-outlined {
    background-color: var(--dusk-color-inverted);
    border-color: var(--dusk-color);
    color: var(--dusk-color);
}
.wf-badge-dusk.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--dusk-color);
}
/* ── LIGHT ── */
.wf-badge-light {
    background-color: var(--light-color);
    border-color: var(--wf-text-muted);
    color: var(--wf-text-muted);
}
.wf-badge-light.wf-badge-outlined {
    background-color: transparent;
    border-color: var(--wf-text-muted);
    color: var(--wf-text-muted);
}
.wf-badge-light.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--wf-text-muted);
}
/* ── DARK ── */
.wf-badge-dark {
    background-color: var(--dark-color);
    border-color: transparent;
    color: var(--white-color);
}
.wf-badge-dark.wf-badge-outlined {
    background-color: var(--grey-color-500);
    border-color: var(--dark-color);
    color: var(--dark-color);
}
.wf-badge-dark.wf-badge-plain {
    background-color: transparent;
    border-color: transparent;
    color: var(--dark-color);
}
.wf-badge-transparent {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}
/* ── Icon ── */
.wf-badge i.icon {
    font-size: .750rem;
}
.wf-badge.wf-badge-md i.icon {
    font-size: 1rem;
}
.wf-badge.wf-badge-lg i.icon {
    font-size: 1.25rem;
}
/* ── Dot badge (notification dot, no text) ── */
.wf-badge-dot {
    width: .5rem;
    min-width: 0;
    height: .5rem;
    padding: 0;
    border-radius: 50%;
}
.wf-badge-dot.wf-badge-xs {
    width: .25rem;
    height: .25rem;
}
.wf-badge-dot.wf-badge-sm {
    width: .375rem;
    height: .375rem;
}
.wf-badge-dot.wf-badge-md {
    width: .750rem;
    height: .750rem;
}
.wf-badge-dot.wf-badge-lg {
    width: .875rem;
    height: .875rem;
}
/* ── Sizes ── */
.wf-badge-xs {
    font-size: .5rem;
}
.wf-badge-sm {
    font-size: .6875rem;
}
.wf-badge-md {
    font-size: .875rem;
}
.wf-badge-lg {
    font-size: 1rem;
}