.badge-root {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    vertical-align: middle;

    .badge {
        height: 20px;
        display: flex;
        padding: 0 6px;
        z-index: 1;
        position: absolute;
        flex-wrap: wrap;
        font-size: 0.75rem;
        min-width: 20px;
        box-sizing: border-box;
        transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        align-items: center;
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 500;
        line-height: 1;
        align-content: center;
        border-radius: 10px;
        flex-direction: row;
        justify-content: center;
        direction: ltr;
    }

    .badge-top-start {
        top: 0;

        &.badge-overlap-circle {
            top: 14%;
            @include positionStart(14%);
        }

        [dir="ltr"] &,
        .ltr & {
            left: 0;
            transform: translate(-50%, -50%);
            transform-origin: 0% 0%;
        }

        [dir="rtl"] &,
        .rtl & {
            right: 0;
            transform: translate(50%, -50%);
            transform-origin: 100% 0%;
        }
    }

    .badge-top-end {
        top: 0;

        &.badge-overlap-circle {
            top: 14%;
            @include positionEnd(14%);
        }

        [dir="ltr"] &,
        .ltr & {
            right: 0;
            transform: translate(50%, -50%);
            transform-origin: 100% 0%;
        }

        [dir="rtl"] &,
        .rtl & {
            left: 0;
            transform: translate(-50%, -50%);
            transform-origin: 0% 0%;
        }
    }

    .badge-bottom-start {
        bottom: 0;

        &.badge-overlap-circle {
            bottom: 14%;
            @include positionStart(14%);
        }

        [dir="ltr"] &,
        .ltr & {
            left: 0;
            transform: translate(-50%, 50%);
            transform-origin: 0% 100%;
        }

        [dir="rtl"] &,
        .rtl & {
            right: 0;
            transform: translate(50%, 50%);
            transform-origin: 100% 100%;
        }

        &.badge-dot {
            transform: none !important;
            top: auto;
            margin-bottom: -4px;
            @include marginStart(-4px);
        }
    }

    .badge-bottom-end {
        bottom: 0;

        &.badge-overlap-circle {
            bottom: 14%;
            @include positionEnd(14%);
        }

        [dir="ltr"] &,
        .ltr & {
            right: 0;
            transform: translate(50%, 50%);
            transform-origin: 100% 100%;
        }

        [dir="rtl"] &,
        .rtl & {
            left: 0;
            transform: translate(-50%, 50%);
            transform-origin: 0% 100%;
        }

        &.badge-dot {
            transform: none !important;
            top: auto !important;
            margin-bottom: -4px;
            @include marginEnd(-4px);
        }
    }

    .badge-dot {
        height: 8px;
        padding: 0;
        min-width: 8px;
        border-radius: 4px;
    }

    .badge-anim {
        &:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: badge-ripple 1.2s infinite ease-in-out;
            border: 2px solid currentColor;
            content: "";
        }
    }
}

@keyframes badge-ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}