.badge-wrapper {
    position: relative;
    display: inline-block;

    .badge-slot {
        line-height: 0;
    }

    .badge {
        height: 20px;
        min-width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $success;
        color: $white;

        &.top-left {
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
        }

        &.top-right {
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
        }

        &.bottom-left {
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translate(-50%, 50%);
        }

        &.bottom-right {
            position: absolute;
            bottom: 0;
            right: 0;
            transform: translate(50%, 50%);
        }
    }
}