@import "variables";
@import "functions";
@import "mixins";

.quick-menu {
    &.overlay { // The backdrop when menu is open.
        &.active { background-color: $backdrop-bg; width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: $z-index-backdrop; }
    }
    // The navigational menu (mostly quick menu styles for mobile first approach).
    &.navigation { width: 100%; pointer-events: none; display: flex; flex-direction: column-reverse; position: fixed; bottom: 0; left: 0; right: 0; text-align: center; z-index: $z-index-menu;
        .button { pointer-events: auto; cursor: pointer; cursor: hand; margin: 50px auto; padding: $menu-btn-padding; background: map-deep-get($themes, 'light', 'menu-btn-bg'); color: map-deep-get($themes, 'light', 'menu-btn-color'); @include border-radius(28px); @include box-shadow(rgba(0, 0, 0, 0.5)); @supports (margin: env(safe-area-inset-bottom)) { margin-bottom: calc(80px + env(safe-area-inset-bottom)); }
            &.hide { display: none; }

            @include dark-mode { background: map-deep-get($themes, 'dark', 'menu-btn-bg'); color: map-deep-get($themes, 'dark', 'menu-btn-color'); }

            .qm-icon { vertical-align: middle; } // Iconography
        }
        .menu { display: none; pointer-events: auto; background-color: map-deep-get($themes, 'light', 'menu-bg'); color: map-deep-get($themes, 'light', 'menu-color'); padding: 20px; padding-bottom: 50px; @include border-radius($menu-border-radius); -webkit-overflow-scrolling: touch;

            @include dark-mode { background-color: map-deep-get($themes, 'dark', 'menu-bg'); color: map-deep-get($themes, 'dark', 'menu-color'); }

            &.show { display: block; }
            .menu-heading { display: block; text-align: $menu-head-alignment;
                // Iconography
                .qm-icon { display: inline-grid; background-color: map-deep-get($themes, 'light', 'menu-head-icon-bg'); color: map-deep-get($themes, 'light', 'menu-head-icon-color'); padding: $menu-head-icon-padding; margin: 10px; @include border-radius($menu-head-icon-border-radius);
                    @include dark-mode { background-color: map-deep-get($themes, 'dark', 'menu-head-icon-bg'); color: map-deep-get($themes, 'dark', 'menu-head-icon-color'); }
                }
                span, p { display: block; margin: 10px; }
                span { color: map-deep-get($themes, 'light', 'menu-head-title-color');
                    @include dark-mode { color: map-deep-get($themes, 'dark', 'menu-head-title-color'); }
                }
            }
            hr { border: 0; height: 1px; background-color: map-deep-get($themes, 'light', 'divider-color'); padding: 0; margin: 20px -20px 20px -20px;
                @include dark-mode { background-color: map-deep-get($themes, 'dark', 'divider-color'); }
            }
            .menu-close { display: block; color: map-deep-get($themes, 'light', 'close-button-color'); background-color: map-deep-get($themes, 'light', 'close-button-bg'); padding: 15px; text-align: center; cursor: hand; cursor: pointer; @include border-radius($close-button-border-radius);

                @include dark-mode { color: map-deep-get($themes, 'dark', 'close-button-color'); background-color: map-deep-get($themes, 'dark', 'close-button-bg'); }
                @supports (margin: env(safe-area-inset-bottom)) { margin-bottom: calc(10px + env(safe-area-inset-bottom)); } // Place in clickable area on iPhone X onwards portrait.
            }
            // Wrap navigation links to facilitate horizontal scrolling.
            nav { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; display: block; margin-bottom: 20px;
                ul { list-style: none; margin: 0; padding: 0;
                    li { display: inline-block; max-width: $nav-item-max-width; min-width: $nav-item-width; margin-right: $nav-item-margin; &:last-child { margin-right: 0; }
                        a { display: block; background-color: map-deep-get($themes, 'light', 'nav-item-bg'); border: map-deep-get($themes, 'light', 'nav-item-border') map-deep-get($themes, 'light', 'nav-item-color'); padding: 20px 10px; text-align: center; @include border-radius($nav-item-border-radius);

                            @include dark-mode { background-color: map-deep-get($themes, 'dark', 'nav-item-bg'); border: map-deep-get($themes, 'dark', 'nav-item-border') map-deep-get($themes, 'dark', 'nav-item-color'); }

                            .qm-icon { display: block; text-align: center; margin: 15px 0; } // Iconography
                        }
                    }
                }
            }
        }
        // Animate hide and show classes which are dynamically added/removed.
        .hide { animation: hide 0.5s forwards ease-in-out; }
        .show { animation: show 0.5s forwards ease-in-out; }
        @keyframes hide {
            0% { transform: translate(0); }
            20% { transform: translate(0, 5px); }
            100% { transform: translate(0, 120px); }
        }
        @keyframes show {
            0% { transform: translate(0, 120px); }
            80% { transform: translate(0, -5px); }
            100% { transform: translate(0); }
        }
    }
}

// Mobile and tablet devices only, ensuring these styles do not apply to desktops.
@include menu-breakpoint(mobile-tablet-only) {
    .quick-menu {
        &.navigation {
            .menu {
                nav {
                    ul {
                        li {
                            a { color: map-deep-get($themes, 'light', 'nav-item-color');
                                @include dark-mode { color: map-deep-get($themes, 'dark', 'nav-item-color'); }
                            }
                        }
                    }
                }
            }
        }
    }
}

// Tablet version of quick menu.
@include menu-breakpoint(tablet) {
    .quick-menu {
        &.navigation {
            .menu { max-width: 400px; margin: 20px auto; @include border-radius(15px); }
        }
    }
}

// Enable scrolling on quick menu when in landscape on mobile.
@include menu-breakpoint(mobile-landscape) {
    .quick-menu {
        &.navigation {
            .menu { max-height: 80vh; overflow: auto; margin: 0 auto;
                // Larger mobile devices in landscape will inherit tablet styling, therefore define the following values for mobile-landscape.
                max-width: 50%; @include border-radius(15px 15px 0 0);
            }
        }
    }
}

// Desktop, navigation links only.
@include menu-breakpoint(desktop) {
    .quick-menu {
        &.navigation { display: block; pointer-events: auto; position: relative; text-align: unset;

            .button { display: none; } // Do not display 'Quick Menu' button.

            .menu { display: block; @include border-radius(0); background-color: unset; padding: 0; max-height: unset; max-width: unset; margin: unset;

                // Don't show any quick-menu contents.
                .menu-heading, .menu-close, hr, .qm-only { display: none !important; }

                nav { overflow-x: initial; overflow-y: initial; white-space: initial; display: block; margin-bottom: 0; // unset horizontal scrolling.
                    ul {
                        li { max-width: unset; min-width: unset;
                            a { display: inline; padding: 0; border: 0; @include border-radius(0); background-color: unset; } // Remove link styling.
                        }
                    }
                }
            }
        }
    }
}