/* Labels */

.labels {
    display: inline-flex;
    flex-wrap: wrap;

    &:not(.no-gap) {
        gap: 5px;
    }
}


.label {

    --label-min-size: 20px;
    --label-min-width: var(--label-min-size);
    --label-min-height: var(--label-min-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    font-size: var(--12px);
    font-weight: 400;
    line-height: 1em;
    min-height: var(--label-min-width, 20px);
    min-width: var(--label-min-height, 20px);
    padding: 3px 6px;

    &.circular {
        border-radius: 999px;
    }

    &:not(.circular):not(.no-radius) {
        border-radius: 4px;
    }

    &.size-sm {
        --label-min-size: 22px;
        font-size: var(--13px);
        padding: 3px 7px;
    }

    &.size-md {
        --label-min-size: 26px;
        font-size: var(--14px);
        padding: 5px 8px;
    }

    &.size-lg {
        --label-min-size: 30px;
        font-size: var(--15px);
        padding: 7px 10px;
    }

}



/* Label Colors */

.label {

    &.primary {
        color: var(--theme-primary-text);
        border-color: var(--theme-primary-color);
        background-color: var(--theme-primary-color);
    }

    &.secondary {
        color: var(--theme-secondary-text);
        border-color: var(--theme-secondary-color);
        background-color: var(--theme-secondary-color);
    }

    &.tertiary {
        color: var(--theme-tertiary-text);
        border-color: var(--theme-tertiary-color);
        background-color: var(--theme-tertiary-color);
    }

    &.slate {
        color: var(--theme-slate-text);
        border-color: var(--theme-slate-color);
        background-color: var(--theme-slate-color);
    }

    &.featured {
        color: var(--theme-featured-text);
        border-color: var(--theme-featured-color);
        background-color: var(--theme-featured-color);
    }

    &.positive {
        color: var(--theme-positive-text);
        border-color: var(--theme-positive-color);
        background-color: var(--theme-positive-color);
    }

    &.negative {
        color: var(--theme-negative-text);
        border-color: var(--theme-negative-color);
        background-color: var(--theme-negative-color);
    }

    &.warning {
        color: var(--theme-warning-text);
        border-color: var(--theme-warning-color);
        background-color: var(--theme-warning-color);
    }

}