/* Labels */

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

    &.flex {
        display: flex;
    }

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


.label {

    --label-min-size: 20px;
    --label-min-width: var(--label-min-size);
    --label-min-height: var(--label-min-size);
    --label-border-color: var(--theme-grayish);
    --label-border-radius: 4px;
    --label-font-size: var(--12px);
    --label-font-weight: 400;
    --label-line-height: 1em;
    --label-letter-spacing: 0em;

    --label-padding-x: 6px;
    --label-padding-y: 3px;
    --label-gap: 5px;

    &.semibold,
    &.font-semibold {
        --label-font-weight: 500;
    }

    &.bold,
    &.font-bold {
        --label-font-weight: 600;
    }

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

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

    &.size-lg {
        /*--label-min-size: 32px;*/
        --label-min-size: 30px;
        --label-font-size: var(--14px);
        --label-padding-x: 10px;
        --label-padding-y: 7px;
    }

    &.size-xl {
        --label-min-size: 32px;
        --label-font-size: var(--16px);
        --label-padding-x: 11px;
        --label-padding-y: 9px;
    }

    &.size-xxl {
        --label-min-size: 42px;
        --label-font-size: var(--18px);
        --label-padding-x: 15px;
        --label-padding-y: 12px;
    }



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

    gap: var(--label-gap, 5px);
    font-size: var(--label-font-size, 12px);
    font-weight: var(--label-font-weight, 400);
    letter-spacing: var(--label-letter-spacing, 0em);
    line-height: var(--label-line-height, 1em);
    min-height: var(--label-min-width, 20px);
    min-width: var(--label-min-height, 20px);
    padding: var(--label-padding-y, 3px) var(--label-padding-x, 6px);

    &.empty {
        padding: 0;
        min-width: 8px;
        min-height: 8px;
    }

    &.border {
        border: 1px solid var(--label-border-color);
    }

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

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

    &.rounded {
        --label-border-radius: 999px;
        --label-padding-y2: calc(1.5 * var(--label-padding-y, 3px));
        --label-padding-x2: calc(1.5 * var(--label-padding-x, 6px));
        padding: var(--label-padding-y2, 3px) var(--label-padding-x2, 6px);
    }


}





/* 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);
    }

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

    &.slate {
        color: var(--theme-slate-text);
        border-color: var(--theme-slate-color);
        background-color: var(--theme-slate-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);
    }

    &.black {
        color: var(--theme-white);
        border-color: var(--theme-black);
        background-color: var(--theme-black);
    }

    &.white {
        color: var(--theme-black);
        background-color: var(--theme-white);
    }

}





/* Label License Plate */

.label.license-plate {

    --label-font-weight: 700;
    --label-border-radius: 8px;
    --label-letter-spacing: .08em;

    &:not([class*="size-"]) {
        --label-font-size: var(--16px);
        --label-padding-x: 11px;
        --label-padding-y: 9px;
    }



    position: relative;
    overflow: hidden;
    color: var(--theme-black);
    background-color: var(--theme-white);
    font-family: ui-monospace, Menlo, monospace;

    &:not(.no-border) {
        border: 1px solid var(--label-border-color);
    }

    &.border {
        border: 2px solid var(--theme-black);
    }

    &:has( .license-country ) {
        padding: 0 0 0 30px !important;
    }

    &[data-license-country] {
        color: var(--license-plate-color, currentColor);
        background-color: var(--license-plate-background, var(--theme-white));
    }

    &:has(> span) {
        padding: 0;
        & > span:last-child {
            padding: var(--label-padding-y, 3px) var(--label-padding-x, 6px);
        }
    }

    & .license-country {

        span {
            padding: 0;
            font-size: 0.5625em;
        }

    }

}