/* Market UI v2 - Badges Variables */

:root,
.m-theme-default,
.m-badge {
    --m-badges-min-height: 24px;
    --m-badges-padding-x: 10px;
    --m-badges-padding-y: 4px;
    --m-badges-gap: 6px;
    --m-badges-border-width: 1px;
    --m-badges-radius: 999px;
    --m-badges-font-size: 12px;
    --m-badges-font-weight: 760;
    --m-badges-line-height: 1;
    --m-badges-bg: var(--m-context-surface-muted);
    --m-badges-text: var(--m-context-text);
    --m-badges-border: var(--m-context-border-subtle);
    --m-badges-accent-bg: var(--m-badges-bg);
    --m-badges-accent-text: var(--m-badges-text);
    --m-badges-accent-border: var(--m-badges-border);
}

.m-badge[data-color="c1"] {
    --m-badges-accent-bg: var(--m-color-c1-soft);
    --m-badges-accent-text: var(--m-color-c1);
    --m-badges-accent-border: var(--m-color-c1-soft-strong);
}

.m-badge[data-color="c2"] {
    --m-badges-accent-bg: var(--m-color-c2-soft);
    --m-badges-accent-text: var(--m-color-c2);
    --m-badges-accent-border: var(--m-color-c2-soft-strong);
}

.m-badge[data-color="c3"] {
    --m-badges-accent-bg: var(--m-color-c3-soft);
    --m-badges-accent-text: var(--m-color-c3);
    --m-badges-accent-border: var(--m-color-c3-soft-strong);
}

.m-badge[data-color="c4"] {
    --m-badges-accent-bg: var(--m-color-c4-soft);
    --m-badges-accent-text: var(--m-color-c4);
    --m-badges-accent-border: var(--m-color-c4-soft-strong);
}

.m-badge[data-color="c5"] {
    --m-badges-accent-bg: var(--m-color-c5-soft);
    --m-badges-accent-text: var(--m-color-c5);
    --m-badges-accent-border: var(--m-color-c5-soft-strong);
}

.m-badge[data-color="c6"] {
    --m-badges-accent-bg: var(--m-color-c6-soft);
    --m-badges-accent-text: var(--m-color-c6);
    --m-badges-accent-border: var(--m-color-c6-soft-strong);
}

.m-badge[data-color="c7"] {
    --m-badges-accent-bg: var(--m-color-c7-soft);
    --m-badges-accent-text: var(--m-color-c7);
    --m-badges-accent-border: var(--m-color-c7-soft-strong);
}

.m-badge[data-color="c8"] {
    --m-badges-accent-bg: var(--m-color-c8-soft);
    --m-badges-accent-text: var(--m-color-c8);
    --m-badges-accent-border: var(--m-color-c8-soft-strong);
}

.m-badge[data-color="c9"] {
    --m-badges-accent-bg: var(--m-color-c9-soft);
    --m-badges-accent-text: var(--m-color-c9);
    --m-badges-accent-border: var(--m-color-c9-soft-strong);
}

.m-badge[data-color="c10"] {
    --m-badges-accent-bg: var(--m-color-c10-soft);
    --m-badges-accent-text: var(--m-color-c10);
    --m-badges-accent-border: var(--m-color-c10-soft-strong);
}

.m-badge[data-m-state] {
    --m-badges-accent-bg: var(--m-state-active-bg);
    --m-badges-accent-text: var(--m-state-accent);
    --m-badges-accent-border: var(--m-state-active-border);
}