// Mixins
@mixin on-circle($item-count, $circle-size, $item-size) {
    position: relative;
    width: $circle-size;
    height: $circle-size;
    padding: 0;
    border-radius: 50%;
    list-style: none;

    >* {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        width: $item-size;
        height: $item-size;
        margin: -($item-size / 2);
        transition: transform cubic-bezier(0.075, 0.82, 0.165, 1) 1s, opacity .3s;
    }
}

@keyframes floatingButton {
    0% {
        right: -99px;
    }

    100% {
        right: -20px;
    }
}

#floating-snap-btn-wrapper {
    position: fixed;
    transform: translate(-50%, -50%);
    top: 60%;
    right: -20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 1109;
    transform-origin: center;
    animation: floatingButton .3s linear 2s;
    animation-fill-mode: backwards;


    .fab-btn {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        z-index: 1000;
        box-shadow: 0px 2px 17px -1px rgba(0, 0, 0, 0.3);
        background-color: var(--wolmart-primary-color, #369);

        svg {
            fill: #fff;
            width: 32px;
        }

        i {
            color: #fff;
            font-size: 30px;

            &.w-icon-hamburger {
                font-size: 20px;
            }
        }

        i:not(.fab-close-icon),
        svg {
            transform: rotate(0deg) scale(1);
            transition: transform .5s, visibility .5s;
        }

        .fab-close-icon {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(0) scale(.2);
            opacity: 0;
            visibility: hidden;
            transition: none;
        }
    }

    &.fab-active {
        .fab-close-icon {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) rotate(180deg) scale(1);
            transition: .5s;
        }

        .fab-btn {

            i:not(.fab-close-icon),
            svg {
                transform: rotate(0) scale(.2);
                visibility: hidden;
                transition: none;
            }
        }
    }

    .floating-icons-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        margin: 0;
        padding: 0;
        transform: translate(-50%, -50%);

        @include on-circle($item-count: 5, $circle-size: 120px, $item-size: 40px);

        li {
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 50%;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
            font-size: 20px;
            opacity: 0;

            .cart-count {
                position: absolute;
                top: -3px;
                right: -3px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 18px;
                height: 18px;
                font-size: 10px;
                border-radius: 50%;
                background-color: var(--wolmart-secondary-color, #f93);
                color: #fff;
            }

            .mobile-floating-item {
                color: #fff;
            }

            #scroll-top {
                display: block !important;
            }
        }
    }

    &.fab-active {
        li:hover {
            background-color: #222;
        }

        &.left {}

        &.right {}
    }
}