/* Market UI v2 - Badges */

.m-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-badges-gap);
    min-height: var(--m-badges-min-height);
    max-width: 100%;
    padding: var(--m-badges-padding-y) var(--m-badges-padding-x);
    border: var(--m-badges-border-width) solid var(--m-badges-border);
    border-radius: var(--m-badges-radius);
    background: var(--m-badges-bg);
    color: var(--m-badges-text);
    font-size: var(--m-badges-font-size);
    font-weight: var(--m-badges-font-weight);
    line-height: var(--m-badges-line-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

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

.m-badge > i,
.m-badge > svg {
    flex: 0 0 auto;
    font-size: 1em;
}

.m-badge.is-xs {
    --m-badges-min-height: 18px;
    --m-badges-padding-x: 7px;
    --m-badges-padding-y: 2px;
    --m-badges-font-size: 10px;
}

.m-badge.is-sm,
.m-badge.is-compact {
    --m-badges-min-height: 20px;
    --m-badges-padding-x: 8px;
    --m-badges-padding-y: 3px;
    --m-badges-font-size: 11px;
}

.m-badge.is-lg {
    --m-badges-min-height: 30px;
    --m-badges-padding-x: 12px;
    --m-badges-padding-y: 6px;
    --m-badges-font-size: 13px;
}

.m-badge:not(.m-badge--pill) {
    border-radius: min(var(--m-badges-radius), 8px);
}