.bbr-badge {
    position: relative;
    display: inline-flex;

    &__indicator {
        position: absolute;
        top: -0.4rem;
        right: -0.4rem;
        z-index: 1;
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        border: 2px solid #fff;
        background-color: #363636;
        color: #fff;

        &.is-primary {
            background-color: #00d1b2;
            color: #fff;
        }

        &.is-link {
            background-color: #485fc7;
            color: #fff;
        }

        &.is-info {
            background-color: #3e8ed0;
            color: #fff;
        }

        &.is-success {
            background-color: #48c774;
            color: #fff;
        }

        &.is-warning {
            background-color: #ffe08a;
            color: rgba(0, 0, 0, 0.7);
        }

        &.is-danger {
            background-color: #f14668;
            color: #fff;
        }

        &--dot {
            min-width: 0.6rem;
            width: 0.6rem;
            height: 0.6rem;
            padding: 0;
            top: -0.2rem;
            right: -0.2rem;
        }

        &--hidden {
            display: none;
        }
    }
}