@import url('tokens.css');
@import url('tokens-primitives.css');


/* Badge styles */

.badge
{
   
    border-radius: var(--radius-20xl);
    line-height: var(--line-extended);
    min-width: var(--base-64);
    font-family: var(--font-family-primary);
    width:fit-content;
    text-transform: uppercase;
    letter-spacing:0.1em;
    display: inline-flex;
align-items: center;
justify-content: center;
    


}

/* +++++++++++++++++ Badge Variants: Size +++++++++++++++++ */
.badge-m
{
    font-size: var(--font-size-s);
    padding: var(--space-component-xs) var(--space-component-l);
    max-height: var(--base-48);
}
.badge-l
{
    font-size: var(--font-size-m);
    padding: var(--space-component-sm) var(--space-component-l);
    max-height: var(--base-48);
}
/* +++++++++++++++++ Badge Variants: Style +++++++++++++++++ */
.badge-brand
{
    background-color: var(--badge-bg-brand);
    color: var(--badge-text-brand);
}

.badge-neutral
{
    background-color: var(--badge-bg-neutral);
    color: var(--badge-text-neutral);
}

.badge-success
{
    background-color: var(--badge-bg-success);
    color: var(--badge-text-success);
}

.badge-warning
{
    background-color: var(--badge-bg-warning);
    color: var(--badge-text-warning);
}
.badge-dark
{
    background-color: var(--badge-bg-dark);
    color: var(--badge-text-dark);
}