:root {
    --reactist-badge-font-size: 10px;

    --reactist-badge-info-tint: #666666;
    --reactist-badge-info-fill: #eeeeee;

    --reactist-badge-positive-tint: #058527;
    --reactist-badge-positive-fill: #e0f0e3;

    --reactist-badge-promote-tint: #8f4700;
    --reactist-badge-promote-fill: #faead1;

    --reactist-badge-attention-tint: #cf473a;
    --reactist-badge-attention-fill: #f9e3e2;

    --reactist-badge-warning-tint: #ffffff;
    --reactist-badge-warning-fill: #eb8909;
}

.badge {
    font-family: var(--reactist-font-family);
    font-weight: var(--reactist-font-weight-strong);
    font-size: var(--reactist-badge-font-size);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 3px;
    padding: 1px var(--reactist-spacing-xsmall);
    color: var(--reactist-badge-tint);
    background-color: var(--reactist-badge-fill);
    line-height: calc(var(--reactist-badge-font-size) + 3px);
    white-space: nowrap;
    text-decoration: none;
}

.badge:hover {
    color: var(--reactist-badge-tint);
    text-decoration: none;
}

.badge-info {
    --reactist-badge-tint: var(--reactist-badge-info-tint);
    --reactist-badge-fill: var(--reactist-badge-info-fill);
}

.badge-positive {
    --reactist-badge-tint: var(--reactist-badge-positive-tint);
    --reactist-badge-fill: var(--reactist-badge-positive-fill);
}

.badge-promote {
    --reactist-badge-tint: var(--reactist-badge-promote-tint);
    --reactist-badge-fill: var(--reactist-badge-promote-fill);
}

.badge-attention {
    --reactist-badge-tint: var(--reactist-badge-attention-tint);
    --reactist-badge-fill: var(--reactist-badge-attention-fill);
}

.badge-warning {
    --reactist-badge-tint: var(--reactist-badge-warning-tint);
    --reactist-badge-fill: var(--reactist-badge-warning-fill);
}
