/*
 * =========================================================
 * FLOATING SOCIAL ICONS - MOBILE
 * =========================================================
 *
 * Mobile only.
 *
 * Desktop is NOT affected.
 */


/*
 * =========================================================
 * MOBILE TOGGLE
 * =========================================================
 *
 * Hidden on desktop.
 */

.social-mobile-toggle {
    display: none;
}


@media (max-width: 768px) {

    /*
     * =====================================================
     * COLLAPSED STATE
     * =====================================================
     *
     * Only the small menu button is visible.
     */

    .social-float:not(.mobile-open) .social-bubble {

        display: none;
    }


    /*
     * =====================================================
     * MOBILE BUTTON
     * =====================================================
     */

    .social-float .social-mobile-toggle {

        display: flex;

        width: 40px;
        height: 40px;

        align-items: center;
        justify-content: center;

        padding: 0;
        margin: 0;

        border: 1px solid rgba(255, 255, 255, 0.35);

        border-radius: 50%;

        color: #ffffff;

        background:
            linear-gradient(135deg,
                rgba(30, 41, 59, 0.95),
                rgba(71, 85, 105, 0.90));

        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.20),

            inset 0 1px 0 rgba(255, 255, 255, 0.25);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        font-size: 18px;
        line-height: 1;

        cursor: pointer;

        touch-action: manipulation;

        -webkit-tap-highlight-color:
            transparent;
    }


    /*
     * =====================================================
     * BUTTON HOVER
     * =====================================================
     */

    .social-float .social-mobile-toggle:hover {

        transform: scale(1.06);
    }


    /*
     * =====================================================
     * EXPANDED STATE
     * =====================================================
     *
     * Show all six social icons.
     */

    .social-float.mobile-open .social-bubble {

        display: flex;
    }


    /*
     * =====================================================
     * MOBILE GAP
     * =====================================================
     */

    .social-float.mobile-open {

        gap: 7px;
    }


    /*
     * =====================================================
     * SMALL MOBILE
     * =====================================================
     */

    @media (max-width: 420px) {

        .social-float {

            --bubble-size: 38px;
            --bubble-gap: 6px;
        }


        .social-float .social-mobile-toggle {

            width: 38px;
            height: 38px;

            font-size: 17px;
        }
    }
}