@layer components {
    .ui-badge {
        --badge-bg: var(--text-200);
        --badge-color: var(--text-800);
        --badge-border: var(--text-200);

        font-size: var(--font-size-sm);
        padding-inline: var(--spaceing);
        background-color: var(--badge-bg);
        height: var(--height-xs);
        border-radius: var(--rounded-full);
        color: var(--badge-color);
        width: fit-content;
        justify-content: center;
        align-items: center;
        display: inline-flex;
        border: var(--border-width) solid var(--badge-border);
        text-transform: capitalize;

        &[data-color=red] {
            --badge-color: var(--red-800);
            --badge-border: var(--red-200);
            --badge-bg: var(--red-200);
        }

        &[data-color=green] {
            --badge-color: var(--green-800);
            --badge-border: var(--green-200);
            --badge-bg: var(--green-200);
        }

        &[data-color=yellow] {
            --badge-color: var(--amber-950);
            --badge-border: var(--amber-400);
            --badge-bg: var(--amber-400);
        }

        &[data-color=blue] {
            --badge-color: var(--blue-800);
            --badge-border: var(--blue-200);
            --badge-bg: var(--blue-200);
        }
    }
}