.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-secondary {
    background-color: var(--crimson-blaze);
}
.label-subdued {
    background-color: var(--subdued);
}
.label-white {
    background-color: var(--white);
    color: var(--black);
}
.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(--black);
}
.label-chanterelles {
    background-color: var(--chanterelles);
    color: var(--black);
}
.label-queen-blue {
    background-color: var(--queen-blue);
}
.label-iris {
    background-color: var(--ayame-iris);
}
.label-red-bud {
    background-color: var(--red-bud);
}

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