.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;
}



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




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


.ui-badge-wrapper.variant-filled.type-neutral {
    border-color: var(--meb-border-subtle);
}



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




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



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




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




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




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




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




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

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


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


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

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



.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-text-default);
}

.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);
}