@import "dxHelpers/reset";

.badge {
    --background: var(--dx-g-cloud-blue-natural-90);
    --border-radius: var(--dx-g-spacing-xs);
    --color: var(--dx-g-blue-vibrant-20);
    --height: var(--dx-g-spacing-lg);
    --horizontal-spacing: var(--dx-g-spacing-sm);

    color: var(--dx-c-metadata-badge-color, var(--color));
    background: var(--dx-c-metadata-badge-background, var(--background));
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--height);
    width: min-content;
    padding: 0 var(--horizontal-spacing);
    border-radius: var(--border-radius);
    font-family: var(--dx-g-font-display);
    font-size: 10px;
    text-align: center;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge.size-small {
    --height: var(--dx-g-spacing-md);
    --horizontal-spacing: var(--dx-g-spacing-xs);

    font-size: 8px;
    letter-spacing: 0.5px;
}

@media screen and (max-width: 768px) {
    .badge:not(.size-small) {
        height: var(--dx-g-spacing-lg);
        padding: 0 var(--dx-g-spacing-sm);
        font-size: var(--dx-g-text-2xs);
    }
}