.badge {
    color: $gris900;
    text-shadow: none;
    border-radius: 18px;
    min-width: 18px;
    padding: 2px 5px;
    text-align: center;

    i {
        vertical-align: bottom;
    }
    &.success {
        background-color: $successLight;
        i {
            color: darken($success, 30%);
        }
    }
    &.info {
        background-color: $infoLight;
        i {
            color: $info;
        }
    }
    &.error {
        background-color: $dangerLight;
        i {
            color: $danger;
        }
    }
    &.warning {
        background-color: $warningLight;
        i {
            color: $warning;
        }
    }
    &.notification {
        background-color: $brand700;
        color: $blanc;
    }
    &.notification-red {
        background-color: $rouge;
        color: $blanc;
    }
    &.outlined {
        background-color: transparent;
        color: $brand700;
        border: 2px solid $brand700;
        min-width: 22px;
    }

}