/* *****************************************************************************
*
*  Badge
*
* ***************************************************************************** */

.bf-badge {
    display: flex;

    &--primary .bf-badge__inner {
        --color: var(--bf-color-bg-ground);
        --bg-color: var(--bf-color-neutral-primary);
        .bf-icon svg{
            color: var(--bf-color-bg-ground);
        }
    }

    &--secondary .bf-badge__inner {
        --bg-color: var(--bf-color-feedback-neutral);
        @at-root
        .reversed.bf-badge--secondary,
        .reversed .bf-badge--secondary {
            --color: var(--bf-color-primary-irreversible);
            .bf-icon svg{
                color: var(--bf-color-primary-irreversible)
            }
        }
    }

    &--tertiary .bf-badge__inner {
        --bg-color: var(--bf-color-bg-underground);
    }

    &--tertiary-ground .bf-badge__inner {
        --bg-color: var(--bf-color-bg-ground);
    }

    &__inner {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 .5rem;
        min-height: 1.5rem;
        color: var(--color);
        background-color: var(--bg-color);
    }

    &--rounded .bf-badge__inner {
        border-radius: 1rem;
    }

    &--angle-left,
    &--angle-right {
        .bf-badge__inner:before {
            content: '';
            position: absolute;
            top: 0;
            width: .5rem;
            height: 100%;
            transform: translate(-50%) skew(19deg);
            background-color: inherit;
            z-index: 0;
        }
    }

    &--angle-right .bf-badge__inner {
        padding: 0 .25rem 0 .75rem;

        &:before {
            right: 0;
            transform: translate(50%) skew(-19deg);
        }
    }

    &--angle-left .bf-badge__inner {
        padding: 0 .75rem 0 .25rem;

        &:before {
            left: 0;
            transform: translate(-50%) skew(19deg);
        }
    }

    &__label {
        white-space: nowrap;
        z-index: 1;
        margin: 0;

        span {
            vertical-align: middle;
        }

        &__text {
            display: inline-block;
            line-height: 1.5rem;
        }
    }
}

// Apply White color when badge is dark and reversed.
.reversed .bf-badge,
.reversed.bf-badge {
    &--primary svg {
        color: var(--bf-color-primary-irreversible)
    }
    &--dark {
        --bg-color: var(--bf-color-neutral-primary);
    }
}

.disabled {
    .bf-badge .bf-badge__inner {
        --color: var(--bf-color-neutral-tertiary);
        --bg-color: var(--bf-color-bg-action-no-bg-hover);
    }
}