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

/*! AUI Badge */
aui-badge,
.aui-badge {
    background: var(--aui-badge-bg-color); // RGBA
    border-radius: 2em; // needs to be at least 1em + border-top + border-bottom + padding-top + padding-bottom to get perfectly rounded
    color: var(--aui-badge-text-color);
    font-size: @aui-font-size-small;
    font-weight: @aui-font-weight-normal;
    line-height: 1;
    margin: 0;
    min-height: 1em;
    min-width: 1em; /* want a capsule style even when single digit */
    padding: 2px 6px;
    position: relative;
    display: inline-flex;
    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 */
    }
}