@import '../../global';
@import '../../mixins/typography';

.pill {
    @include action_small;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding-left: $padding;
    padding-right: $padding;

    margin: 0px $push;

    white-space: nowrap;

    border-radius: $padding;
    background-color: color('gray', .75);

    &__danger {
        background-color: color('danger', 1);
        color: color('danger', -1);
    }

    &__success {
        background-color: color('success', 2);
        color: color('success', -1);
    }

    &__primary {
        background-color: color('primary', 2);
        color: color('primary', -1);
    }

    &_icon {
        display: inline-flex;
        align-items: center;

        height: $font-size-small;
        width: $font-size-small;

        margin-right: $push-sm;
    }
}