.label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /*regular size*/
    border-radius: var(--border-radius-round);
    padding: 4px 12px; /*regular size*/
    font-weight: var(--font-weight-semibold); /*regular size*/
    font-size: var(--font-size-small); /*regular size*/
    line-height: var(--line-height-small); /*regular size*/
    color: var(--white);
    background-color: var(--black);
    text-wrap: nowrap;
}
.label-sm {
    padding: 3px 8px;
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-smaller);
}
.label-lg {
    padding: 4px 16px;
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    gap: 8px;
}

.label > span {
    text-align: center;
    flex: 1 0 0;
}


.label-theme {
    background-color: var(--theme-color);
}
.label-black {
    background-color: var(--text-color-main);
}
.label-subdued {
    background-color: var(--text-color-subdued);
}
.label-danger {
    background-color: var(--danger-color);
}
.label-grey-light {
    background-color: var(--color-grey-light); /*Blue Theme*/
    color: var(--text-color-main);
}
.label-grey-light-40 {
    background-color: rgba(var(--rgb-grey-light-bluish), 0.4); /*Blue Theme*/
    color: var(--color-grey-dark);
}
.label-white {
    background-color: var(--white);
    color: var(--text-color-main);
}
.label-crimson {
    background-color: var(--crimson-blaze);
}
.label-crown {
    background-color: var(--crown-jewels);
}
.label-tanzine {
    background-color: var(--tanzine);
}
.label-magenta {
    background-color: var(--magenta-crayon);
}
.label-jade {
    background-color: var(--jade-green);
}
.label-green {
    background-color: var(--green-tea);
}
.label-sea {
    background-color: var(--sea-serpant);
}
.label-exotic {
    background-color: var(--exotic-intense);
}
.label-salmon {
    background-color: var(--buttery-salmon);
    color: var(--text-color-main);
}
.label-chanterelles {
    background-color: var(--chanterelles);
    color: var(--text-color-main);
}
.label-queen-blue {
    background-color: var(--queen-blue);
}
.label-iris {
    background-color: var(--ayame-iris);
}
.label-red-bud {
    background-color: var(--red-bud);
}

.label-blue {
    background-color: var(--success-blue);
}
.label-blue-light {
    background-color: var(--success-blue-light);
    /*color: var(--success-blue);*/
    color: var(--text-color-main);
}
.label-purple {
    background-color: var(--vibrant-purple);
}
.label-purple-light {
    background-color: var(--vibrant-purple-light);
    color: var(--text-color-main);
}
.label-purple-lighter {
    background-color: var(--vibrant-purple-lighter);
    color: var(--text-color-main);
}
.label-horizon-lighter {
    background-color: var(--horizon-blue-lighter);
    color: var(--text-color-main);
}
.label-emerald-light {
    background-color: var(--emerald-green-light);
    color: var(--text-color-main);
}
.label-pink {
    background-color: var(--rose-pink);
}
.label-pink-light {
    background-color: var(--rose-pink-light);
    color: var(--text-color-main);
}


/*variants*/
.label-p-sm {
    padding: 2px 8px;
}

.label-body-sm {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-light);
}


.label .btn-icon{
    color: inherit;
}