/* =========================================================
   REALDEEN SURAH — DESKTOP SIDEBAR EDGE TOGGLE V1
   ========================================================= */

.rd-surah-edge-toggle {
    display:
        none;
}


@media (min-width:1180px) {

    :root {
        --rd-surah-sidebar-edge:
            calc(10 * var(--spacing-mega));
    }


    #rd-surah-edge-toggle {

        position:
            fixed !important;

        /*
         * Button straddles the exact 320px native
         * Surah sidebar boundary.
         */
        left:
            calc(
                var(--rd-surah-sidebar-edge)
                - 14px
            ) !important;

        top:
            50% !important;

        transform:
            translateY(-50%) !important;

        z-index:
            350 !important;

        width:
            28px !important;

        height:
            54px !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        margin:
            0 !important;

        padding:
            0 !important;

        color:
            rgba(226, 239, 241, .84) !important;

        background:
            rgba(24, 43, 50, .96) !important;

        border:
            1px solid rgba(103, 188, 194, .22) !important;

        border-radius:
            10px !important;

        box-shadow:
            0 5px 16px rgba(0, 0, 0, .18),
            inset 0 1px 0 rgba(255,255,255,.04) !important;

        cursor:
            pointer !important;

        transition:
            left .40s ease,
            background .18s ease,
            border-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease !important;
    }


    #rd-surah-edge-toggle:hover {

        color:
            #ffffff !important;

        background:
            rgba(31, 57, 65, .98) !important;

        border-color:
            rgba(103, 201, 207, .42) !important;

        box-shadow:
            0 7px 20px rgba(0, 0, 0, .22),
            0 0 0 3px rgba(44,164,171,.06) !important;
    }


    #rd-surah-edge-toggle:focus-visible {

        outline:
            2px solid rgba(91, 198, 205, .72) !important;

        outline-offset:
            2px !important;
    }


    #rd-surah-edge-toggle svg {

        width:
            16px !important;

        height:
            16px !important;

        display:
            block !important;

        transition:
            transform .28s ease !important;
    }


    /* =====================================================
       CLOSED STATE

       Sidebar slides away using its native class removal.
       Toggle remains accessible on far-left screen edge.
       ===================================================== */

    body.rd-surah-sidebar-collapsed
    #rd-surah-edge-toggle {

        left:
            0 !important;

        border-left:
            0 !important;

        border-radius:
            0 10px 10px 0 !important;
    }


    body.rd-surah-sidebar-collapsed
    #rd-surah-edge-toggle svg {

        transform:
            rotate(180deg) !important;
    }

}


/* Explicitly keep it out of tablet/mobile work. */

@media (max-width:1179px) {

    #rd-surah-edge-toggle {
        display:
            none !important;
    }

}