/*------------------------------------------------------------------
 slide navigation styles
-------------------------------------------------------------------*/

// header links
.nav-wrap {
    position: absolute;
    bottom: auto;
    height: 100%;
}

.header-links {
    border-top: 1px solid rgba($side-panel-header-link-border-color-dark-bg, .1);
    ul {
        padding: 0;
        li {
            display: block;
            padding: 0;
        }
    }
}

#wrapper:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
/*    background: rgba($side-panel-wrapper-before-bg-color, 0.5);*/
/*    z-index: 999999999999;*/
    opacity: 0;
    visibility: hidden;
    transition: all linear .3s;
}

.nav-active {
    #wrapper:before {
        opacity: 1;
        visibility: visible;
    }
}

.nav-wrap {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 21.88rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transition: all .3s linear;
    z-index: 999999999999;
    transform: translate(100%, 0);
    .nav-trigger-close {
        padding: 0.75rem 0.625rem;
        text-align: center;
        background: rgba($side-panel-trigger-close-bg-color-dark-bg, .1);
        a {
            position: relative;
            display: inline-block;
        }
        i {
            position: absolute;
            margin: -12px -7px 0;
            left: 100%;
            top: 50%;
            opacity: 0;
            visibility: hidden;
            transition: all .2s linear;
        }
        &:hover {
            i {
                opacity: 1;
                visibility: visible;
                margin: -12px 5px 0;
            }
        }
    }
    ul.side-nav,
    .header-links ul {
        @extend %listreset;
        >li {
            border-top: 1px solid rgba($side-panel-header-link-border-color-dark-bg, .1);
            transition: all .5s;
            &:first-child {
                border-top: 0;
            }
            >a {
                color: $side-panel-nav-link-color-dark-bg;
                display: block;
                padding: 1.25rem;
                transform: translateX(50px);
                transition: all .4s linear;
                opacity: 0;
                letter-spacing: .05em;
                position: relative;
                z-index: 1;
                &:focus,
                &:active {
                    text-decoration: none;
                }
                &:before {
                    transition: all linear .15s;
                    content: '';
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    width: 0;
                    height: 100%;
                    background: rgba($side-panel-nav-link-before-bg-color-dark-bg, .03);
                    position: absolute;
                    z-index: -1;
                }
                &:hover:before {
                    width: 100%;
                }
            }
            &:nth-child(1) > a {
                transition-delay: .08s;
            }
            &:nth-child(2) > a {
                transition-delay: .16s;
            }
            &:nth-child(3) > a {
                transition-delay: .24s;
            }
            &:nth-child(4) > a {
                transition-delay: .32s;
            }
            &:nth-child(5) > a {
                transition-delay: .40s;
            }
        }
    }
    .dropdown-menu {
        position: relative;
        background: none;
        opacity: 0.5;
        float: none;
        border: none;
        border-radius: 0;
        background: rgba($side-panel-dropdown-bg-color-dark-bg, .05);
        color: $side-panel-dropdown-link-color-dark-bg;
        .dropdown-item {
            color: $side-panel-dropdown-link-color-dark-bg;
            font-weight: $thin-font-weight;
            font-size: 0.8571rem;
            &:focus,
            &:hover {
                color: $side-panel-dropdown-link-hover-color-dark-bg;
                background: rgba($side-panel-dropdown-link-hover-bg-color-dark-bg, 0.13);
            }
        }
    }
    .nav-trigger.navbar-pos-search {
        position: absolute;
        left: 15px;
        top: 42px;
        display: none;
        a {
            padding: 0;
            color: $side-panel-navbar-pos-search-color-dark-bg;
        }
    }
    .nav-desc {
        padding: 0.9375rem;
        border-top: 1px solid rgba($side-panel-header-link-border-color-dark-bg, .1);
    }
}

.nav-active {
    position: relative;
/*    overflow: hidden;*/ /* Comment to make the page scrollable when side panel is active */
    .nav-wrap {
        transform: translate(0, 0);
        box-shadow: 0 22px 38px rgba(0, 0, 0, 0.2);
        .side-nav,
        .header-links {
            a {
                opacity: 1;
                transform: translateX(0);
            }
        }
    }
}

.nav-active .nav-wrap .nav-trigger a {
    transform: rotate(0);
}

.nav-active.offcanvas-left #wrapper {
    transform: translate(21.88rem, 0);
}

.nav-active.offcanvas-right #wrapper {
    transform: translate(-21.88rem, 0);
}

.nav-active.nav-overlay-left .nav-wrap {
    transform: translate(0, 0);
}

.nav-active.nav-overlay .nav-wrap {
    opacity: 1;
    visibility: visible;
}


/* offcanvas left */

.offcanvas-left {
    .nav-wrap {
        right: auto;
        left: 0;
        transform: translate(-21.88rem, 0);
        .nav-trigger {
            display: block;
            i {
                left: auto;
                right: 100%;
            }
        }
    }
    &.nav-active {
        .nav-wrap {
            transform: translate(0, 0);
        }
    }
}


/* nav overlay left */

.nav-overlay-left {
    .nav-wrap {
        transform: translate(-21.88rem, 0);
        right: auto;
        left: 0;
        .nav-trigger-close {
            i {
                left: auto;
                right: 100%;
            }
        }
    }
}


/* nav overlay */

.nav-trigger a {
    display: block;
    transition: all linear .3s;
    color: $side-panel-navbar-pos-search-color-dark-bg;
    margin-top: -0.4375rem;
    a:hover {
        color: $side-panel-navbar-pos-search-color-dark-bg;
    }
}

.nav-active .nav-trigger a {
    transform: scale(-1, 1);
}


/************* white-overlay Panel **********/

.white-overlay {
    .nav-wrap {
        ul.side-nav,
        .header-links ul {
            @extend %listreset;
            >li {
                border-color: $side-panel-header-link-border-color-light-bg;
                >a {
                    color: $side-panel-nav-link-color-light-bg;
                    &:hover:before {
                        background: $side-panel-nav-link-before-bg-color-light-bg;
                    }
                }
            }
        }
        .nav-trigger.navbar-pos-search,
        .nav-trigger {
            a {
                color: $side-panel-navbar-pos-search-color-light-bg;
            }
        }
        .nav-trigger-close {
            background: $side-panel-trigger-close-bg-color-light-bg;
        }
        .nav-desc,
        .header-links {
            border-color: $side-panel-header-link-border-color-light-bg;
        }
        .dropdown-menu {
            background: $side-panel-dropdown-bg-color-light-bg;
            color: $side-panel-dropdown-link-color-light-bg;
            .dropdown-item {
                color: $side-panel-dropdown-link-color-light-bg;
                &:focus,
                &:hover {
                    color: $side-panel-dropdown-link-hover-color-light-bg;
                    background: $side-panel-dropdown-link-hover-bg-color-light-bg;
                }
            }
        }
    }
}