.root {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-xxs);
    color: var(--color-text-primary);
    box-sizing: border-box;
}

.root[data-size='lg'] {
    min-height: 28px;
    padding: var(--spacing-8) var(--spacing-12);
}

.root[data-size='sm'] {
    min-height: 24px;
    padding: var(--spacing-4) var(--spacing-8);
}

.root[data-size='nano'] {
    min-height: 22px;
    padding: var(--spacing-4) var(--spacing-8);
}

.root[data-size='pico'] {
    min-height: 16px;
    padding: var(--spacing-4) var(--spacing-8);
}

.root[data-color='black'] {
    background-color: var(--color-bg-fill-primary);
    color: var(--color-text-primary-inverted);
}

.root[data-color='white'] {
    background-color: var(--color-bg-fill-brand-inverse);
}

.root[data-color='grey'] {
    background-color: var(--color-bg-fill-alpha-black-10);
}

.root[data-color='alpha-white'] {
    background-color: var(--color-bg-fill-alpha-white-10);
    color: var(--color-text-primary-inverted);
}

.root[data-color='sage'] {
    background-color: var(--color-sage-200);
}

.root[data-color='indigo'] {
    background-color: var(--color-bg-fill-brand-indigo);
}

.root[data-color='orchre'] {
    background-color: var(--color-bg-fill-brand-orchre);
}

.root[data-color='solar'] {
    background-color: var(--color-bg-fill-brand-solar);
}

.root[data-color='lilac'] {
    background-color: var(--color-bg-fill-brand-lilac);
}

.root[data-color='success'] {
    background-color: var(--color-calm-green-400);
    color: var(--color-text-primary-inverted);
}

.root[data-color='warning'] {
    background-color: var(--color-heal-yellow-400);
}

.root[data-color='danger'] {
    background-color: var(--color-urgent-red-400);
    color: var(--color-text-primary-inverted);
}

.root[data-color='info'] {
    background-color: var(--color-powder-blue-400);
    color: var(--color-text-primary-inverted);
}

.root[data-color='supportive'] {
    background-color: var(--color-cell-pink-400);
    color: var(--color-text-primary-inverted);
}

.root[data-color='indigo-gradient'] {
    background: linear-gradient(
        276deg,
        #D3D4E0 -5.42%,
        #A8A9C1 8.16%,
        #7A87A6 21.75%,
        #496E8D 35.33%,
        #195675 48.92%,
        #13435B 62.5%,
        #0E3041 76.09%,
        #081D27 89.67%,
        #000 103.26%
    );
    color: var(--color-text-primary-inverted);
}

.root[data-color='ochre-gradient'] {
    background: linear-gradient(
        72deg,
        #492106 0%,
        #894F27 50%,
        #FBA626 100%
    );
    color: var(--color-text-primary-inverted);
}

.root[data-color='solar-gradient'] {
    background: linear-gradient(
        280deg,
        #FEF38E -0.68%,
        #CAB602 125.29%
    );
}

.root[data-color='lilac-gradient'] {
    background: linear-gradient(
        90deg,
        var(--color-lilac-500) -2.53%,
        var(--color-lilac-300) 54.58%,
        var(--color-lilac-100) 94.38%,
        var(--color-lilac-50) 121.21%
    );
    color: var(--color-text-primary-inverted);
}

.labelSm {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-negative-sm);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xs);
}

.labelXs {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-null);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-size: var(--font-size-xxs);
}

.labelPico {
    font-family: var(--font-default), sans-serif;
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-null);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    /* Figma label.emphasis.XS is 10px — 8px read too small on the checkout badges (QA). */
    font-size: var(--font-size-xxs);
}

.labelEmphasis {
    font-family: var(--font-decorative), monospace;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-xxl);
}