:root {
    --fab-gap: 10px;
}

.fab-menu {
    display: none;
}

@media(min-width: 768px) {

    .fab-menu {
        display: flex;
        position: fixed;
        right: 1.5%;
        top: 30vh;
        flex-direction: column;
        gap: 12px;
        z-index: 1050;
    }

    .fab {
        position: relative;
        height: 3%;
        width: 3%;
    }

    .fab-btn {
        position: relative;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 0;
        display: grid;
        place-items: center;
        background: var(--primary-color, #ff7700);
        color: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    }

    .fab-btn::before {
        content: "";
        position: absolute;
        top: 0;
        right: 100%;
        width: var(--fab-gap);
        height: 100%;
        background: transparent;
    }

    .fab-card {
        right: calc(56px + var(--fab-gap));
        width: min(82vw, 320px);
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .15), 0 4px 12px rgba(0, 0, 0, .08);
        transform-origin: right center;
        transform: translateX(12px) scaleX(0);
        transition: transform .28s ease, opacity .2s ease;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        border-radius: 16px;
    }



    .fab.open .fab-card {
        width: min(82vw, 320px);
        opacity: 1;
        pointer-events: auto;
    }

    @media (hover:hover) and (pointer:fine) {
        .fab:hover .fab-card {
            transform: translateX(0) scaleX(1);
            opacity: 1;
            pointer-events: auto;
        }
    }

    .fab-card.card {
        border: 0;
    }

    .fab-card .card-body {
        padding: 14px 16px;
    }

    .fab-card .card-title {
        color: var(--primary-color, #ff7700);
    }

    .fab-btn i {
        font-size: 1.25rem;
    }

    .fab {
        position: relative;
        height: 56px;
        width: 56px;
    }


    .fab-card {
        position: absolute;
        top: 0;
        right: calc(56px);
        margin-right: 10px;

        width: min(82vw, 320px);

        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        border-radius: 16px;
        transition: transform .28s ease, opacity .2s ease;
        transform-origin: right center;

        transform: translateX(12px) scaleX(0);

        will-change: transform, opacity;
    }

    .fab.open .fab-card {
        transform: translateX(0) scaleX(1);
        opacity: 1;
        pointer-events: auto;
    }

    @media (hover:hover) and (pointer:fine) {
        .fab:hover .fab-card {
            transform: translateX(0) scaleX(1);
            opacity: 1;
            pointer-events: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .fab-card {
            transition: none;
        }
    }
}