/*
 *  Copyright 2018 Adobe Systems Incorporated
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
/* WKND Navigation - Mobile */

$nav-item-mobile-top-level-color: #fff;
$nav-item-mobile-hover-color: $brand-primary;
$nav-item-mobile-text-color: #888;
$nav-item-mobile-border : solid 1px rgba(255, 255, 255, 0.05);

.cmp-navigation--mobile {

    .cmp-navigation__item {
        float: left;
        width: 100%;
    }

    .cmp-navigation__item-link {
        display: block;
        color: $text-color-inverse;
        text-decoration: none;
        height: 44px;
        line-height: 44px;
        border-top: $nav-item-mobile-border;
        padding: 0 1em 0 1em;

        &:hover,
        &:focus {
            background-color: unset;
            color: $nav-item-mobile-hover-color;
        }
    }

    .cmp-navigation__item--level-0,
    .cmp-navigation__item--level-1 {

        >.cmp-navigation__item-link {

            &:hover {
                color: $nav-item-mobile-hover-color;
            }
        }
    }

    .cmp-navigation__item--level-2 {
        padding-left: 2em;
    }

    .cmp-navigation__item--level-3 {
        padding-left: 4em;
    }
}

#mobileNav,
#toggleNav {
    display: none;
}

/*Styles to push mobile nav into view */

@media (max-width: $screen-medium) {

    .root.responsivegrid {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        padding-bottom: 1px;
    }

    #toggleNav {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        display: block;
        height: 44px;
        left: 10px;
        position: fixed;
        top: 40px;
        width: 40px;
        z-index: 10001;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }


    #toggleNav .toggle {
        color: $text-color;

        &:hover {
            text-decoration: none;
            color: $text-color;
        }

        .wkndicon-menu {
            font-size: 1.75rem;
            padding: 0.5rem;
            float: left;
    }

    }

    $translateX : 275px;

    #mobileNav {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transform: translateX(-$translateX );
        -webkit-transform: translateX(-$translateX );
        -ms-transform: translateX(-$translateX );
        transform: translateX(-$translateX);
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        display: block;
        height: 100%;
        left: 0;
        overflow-y: auto;
        position: fixed;
        top: 0;
        width: $translateX;
        z-index: 10002;
        background: $black;
        box-shadow: inset -3px 0px 5px 0px rgba(0, 0, 0, 0.35);
    }

    body.navPanel-visible {
        overflow-x: hidden;

        .root.responsivegrid {
            -moz-transform: translateX($translateX );
            -webkit-transform: translateX($translateX );
            -ms-transform: translateX($translateX );
            transform: translateX($translateX );
        }

        #toggleNav {
            -moz-transform: translateX(275px);
            -webkit-transform: translateX(275px);
            -ms-transform: translateX(275px);
            transform: translateX(275px);
        }

        #mobileNav {
            -moz-transform: translateX(0);
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

    }

    body.navPanel-visible.scrolly {
        .wkndicon-menu {
            background: rgba(68, 68, 68, 0.75);
            color: $white;
            border: 1px solid $gray;
        }
    }
}