@import (reference) './imports/global';

/*! AUI Badge */
aui-badge,
.aui-badge {
    background: var(--aui-badge-bg-color); // RGBA
    border-radius: var(--ds-radius-xsmall, 2px);
    box-sizing: border-box;
    color: var(--aui-badge-text-color);
    font: var(--ds-font-body-small);
    margin: 0;
    min-width: var(--ds-space-300);
    block-size: min-content;
    padding-block: 0;
    padding-inline: var(--ds-space-050);
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    justify-items: center;
    align-content: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;

    // Semantic variations

    &.aui-badge-primary {
        background-color: var(--aui-badge-primary-bg-color);
        color: var(--aui-badge-primary-text-color);
    }
    &.aui-badge-added {
        background-color: var(--aui-badge-added-bg-color);
        color: var(--aui-badge-added-text-color);
    }
    &.aui-badge-removed {
        background-color: var(--aui-badge-removed-bg-color);
        color: var(--aui-badge-removed-text-color);
    }
    &.aui-badge-important {
        background-color: var(--aui-badge-important-bg-color);
        color: var(--aui-badge-important-text-color);
    }

    // Integrations:
    // Light versions for contexts we know about
    .aui-button-primary > &,
    .aui-dropdown2 .active > & {
        background: var(--aui-badge-on-blue-bg-color);
        color: var(--aui-badge-on-blue-text-color);
    }

    .aui-button[disabled] > & {
        background: var(--aui-badge-bg-color); // RGBA
        color: inherit;
    }

    .aui-button-primary[disabled] > & {
        background: var(--aui-badge-on-blue-bg-color); // RGBA
    }

    .aui-button > &,
    .aui-tabs .menu-item & {
        top: -1px; /* slight tweak to position them in specific contexts */
    }
}