/* ===== Badge Component ===== */

.ui-badge-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    background: var(--badge-background, var(--meb-surface-input-filled));
    color: var(--badge-text, var(--meb-text-default));
    border: 1px solid var(--badge-border, transparent);
    border-radius: 6px;
    user-select: none;
    white-space: nowrap;
}

/* --- Pill shape --- */

.ui-badge-wrapper.pill {
    border-radius: 999px;
}

/* --- Variant: Filled --- */

.ui-badge-wrapper.variant-filled {
    background: var(--badge-background, var(--meb-surface-card));
}

/* --- Variant: Subtle --- */

.ui-badge-wrapper.variant-subtle {
    background: var(--badge-background-subtle, var(--meb-surface-input-filled));
    border: none;
}

/* --- Variant: Outlined --- */

.ui-badge-wrapper.variant-outlined {
    background: transparent;
    border: 1px solid var(--badge-border, var(--meb-border-subtle));
}

/* --- Type: Neutral --- */

.ui-badge-wrapper.type-neutral {
    --badge-background: var(--meb-surface-input-filled);
    --badge-text: var(--meb-text-default);
}

/* --- Type: Success --- */

.ui-badge-wrapper.type-success {
    --badge-background: var(--meb-accent-success);
    --badge-text: var(--meb-text-inverse);
}

/* --- Type: Warning --- */

.ui-badge-wrapper.type-warning {
    --badge-background: var(--meb-accent-warning);
    --badge-text: var(--meb-text-inverse);
}

/* --- Type: Error --- */

.ui-badge-wrapper.type-error {
    --badge-background: var(--meb-accent-danger);
    --badge-text: var(--meb-text-inverse);
}

/* --- Type: Info --- */

.ui-badge-wrapper.type-info {
    --badge-background: var(--meb-accent-info);
    --badge-text: var(--meb-text-inverse);
}

/* --- Outlined types: inherit type color for border, keep transparent bg --- */

.ui-badge-wrapper.variant-outlined.type-success {
    --badge-border: var(--meb-accent-success);
    --badge-text: var(--meb-accent-success);
    background: transparent;
}

.ui-badge-wrapper.variant-outlined.type-warning {
    --badge-border: var(--meb-accent-warning);
    --badge-text: var(--meb-accent-warning);
    background: transparent;
}

.ui-badge-wrapper.variant-outlined.type-error {
    --badge-border: var(--meb-accent-danger);
    --badge-text: var(--meb-accent-danger);
    background: transparent;
}

.ui-badge-wrapper.variant-outlined.type-info {
    --badge-border: var(--meb-accent-info);
    --badge-text: var(--meb-accent-info);
    background: transparent;
}

.ui-badge-wrapper.variant-outlined.type-neutral {
    --badge-border: var(--meb-border-subtle);
    --badge-text: var(--meb-text-default);
    background: transparent;
}

/* --- Subtle types: lighter tinted backgrounds --- */

.ui-badge-wrapper.variant-subtle.type-success {
    --badge-background-subtle: color-mix(in srgb, var(--meb-accent-success) 15%, transparent);
    --badge-text: var(--meb-accent-success);
}

.ui-badge-wrapper.variant-subtle.type-warning {
    --badge-background-subtle: color-mix(in srgb, var(--meb-accent-warning) 15%, transparent);
    --badge-text: var(--meb-accent-warning);
}

.ui-badge-wrapper.variant-subtle.type-error {
    --badge-background-subtle: color-mix(in srgb, var(--meb-accent-danger) 15%, transparent);
    --badge-text: var(--meb-accent-danger);
}

.ui-badge-wrapper.variant-subtle.type-info {
    --badge-background-subtle: color-mix(in srgb, var(--meb-accent-info) 15%, transparent);
    --badge-text: var(--meb-accent-info);
}

.ui-badge-wrapper.variant-subtle.type-neutral {
    --badge-background-subtle: color-mix(in srgb, var(--meb-text-default) 6%, transparent);
    --badge-text: var(--meb-text-default);
}