/* -----------------------------------------
   MOBILE-CONTROLS
   /src/styles/components/mobile-controls.scss
----------------------------------------- */
header.global-header {

    // Mobile
    @media (max-width: $breakpoint-lg) {
        // show mobile-control
        .mobile-control.toggle-menu{
            display: inline-block;
        }

        // mobile control overlay
        .mobile-controlled{
            position: fixed;
            width: 85%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            background-color: var(--bs-standout, $standout );
            right: -100%;
            z-index: 16;
            transition: right .25s ease-in-out, width .25s ease !important;
            
            &.show{
                right: 0;
            }

            // Search
            .search-container{
                width: 80%;
                margin: auto;
                padding-bottom: 20px;
                // hide the search container until menu button is clicked
                visibility: hidden;

                form {

                    .search-button{
                        color: var(--bs-standout, $standout);
                        background-color: var(--bs-white, $white);
                        border-color: var(--bs-standout, $standout);
                        border-left: 0;
                        
                        &:focus{
                            background-color: var(--bs-gray-75, $gray-75);
                        }
                        &:hover{
                            background-color: var(--bs-gray-75, $gray-75);
                            outline: 0 !important;
                        }
                    }
                    .search-textfield{
                        border-color: var(--bs-standout, $standout);
                        border-right: 0;
                    }
                }
            }

            // Navigation 
            .navigation{
                // hide navigation in mobile until button is clicked
                visibility: hidden;
                border-bottom: 0 !important;

                .container {
                    margin-left: 0;
                    margin-right: 0;
                    max-width: 100%;
    
                    .nav-item {
                        width: 100%;

                        &:first-child .nav-link{
                            border-top: .5px solid var(--bs-gray-100, $gray-100);
                        }

                        a {
                            color: var(--bs-white, $white) !important;
                            margin: 0 5px;
                            border-left: 1px solid transparent !important;
                            border-right: 1px solid transparent !important;
                            border-bottom: .5px solid var(--bs-gray-100, $gray-100);
                            
                            &[aria-current="page"],
                            &.active{
                                color: var(--bs-white, $white);
                                background-color: var(--bs-standout-light, $standout);
                            }

                            &:active,
                            &:hover,
                            &:focus,
                            &.dropdown-item:active{
                                background-color: var(--bs-standout-light, $standout);
                            }

                            &.dropdown-toggle{
                                &:after{
                                    content: '5';
                                    float: right;
                                }
                                &.show:after{
                                    transform: rotate(90deg);
                                }
                            }

                            &.dropdown-item {
                                text-indent: 15px;
                            }
                        }
    
                        .dropdown-menu.show{
                            display: contents;
                        }

                        .link-description{
                            color: $white !important;
                        }
                    }
                }
            }
        }
        
        // hide alerts in the header.
        .alerts,
        .alert{
            display: none;
        }
    }
}

footer.global-footer{
    
    // Mobile
    @media (max-width: $breakpoint-lg) {
        a{
            padding: 0;
        }

        .d-flex{
            flex-direction: column;
        }

        .footer-links{
            flex-direction: column;

            .nav-item{
                align-self: start;

                &:first-child {
                    margin: .5rem 0;
                }
            }
        }

        .social-share-links{
            margin: .5rem 0;
        }
    }
}