/**
 * Badge
 */
@import '../../css/variables';
@import '../../css/mixins';
@import 'css/variables';
@import 'css/colors';
@import 'css/sizes';

.badge {
    display: inline-block;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background: var(----background);
    color: var(----color);
    border-style: var(----border-style);
    border-width: var(----border-width);
    border-color: var(----border-color);
    border-radius: var(----border-radius);
    font-size: var(----font-size);
    font-weight: var(----font-weight);
    padding: var(----padding);
    box-shadow: var(----box-shadow);

    a:hover &,
    a:focus & {
        text-decoration: none;
        ----background: var(----link--background--hover);
    }

    .button & {
        position: relative;
        top: -1px;
    }

    &.-pill {
        ----border-radius: var(----pill--border-radius);
    }
}