// Main Nav
#menu {
    z-index: 105;
    background: $primary-color;
    color: $primary-text-icon-color;
    .toggle-link {
        display: none;
    }
    > ul {
        text-align: right;
        margin: 0;
        padding: 0;
    }
    li {
        display: inline-block;
        transition: .3s all linear;
        &:hover, &.active {
            background-color: rgba(0, 0, 0, .1);
        }
        > a {
            width: 100%;
            display: block;
            font-size: 1em;
        }
    }
    // Responsive Version (Off-Canvas)
    @media screen and (max-width: $mainnav-collapse) {
        padding: 0;
        width: 320px;
        height: 100%;
        overflow-y: sroll;
        overflow-x: hidden;
        position: fixed;
        top: 0px;
        right: -320px;
        transform: translate(0px, 0px);
        transition: .3s all ease;
        z-index: 108;
        @include shadow(1-half);
        background: white;
        color: $primary-text;
        line-height: 44px;
        
        a{
            color: $accent-color;
            
            &:hover{
                color: $accent-color;
            }
        }
        
        &.active {
            transform: translate(-320px, 0);
            transition: .3s all ease;
        }
        .toggle-link {
            display: block;
            position: relative;
            text-align: right;
            &:after {
                content: "";
            }
        }
        > ul {
            text-align: $mainnav-responsive-text-align;
            width: 100%;
            position: relative;
        }
        li {
            display: block;
            &:first-of-type {
                border-top: $noborder;
            }
            &:hover {
                transition: .3s all linear;
                background-color: rgba(0, 0, 0, .1);    
            }
        }
    }
}

.main-menu {
    background: $primary-color;
    color: $primary-text-icon-color;
    height: 64px;
    // line-height: 64px;
    position: fixed;
    top: 0px;
    width: 100%;
    left: 0px;
    font-weight: 400;
    @include shadow(1);
    z-index: 2;
    
    a {
        font-size: 1rem;
        padding: 0 15px;
        color: $primary-text-icon-color;
        &:hover {
            color: $primary-text-icon-color;
        }
    }
    
    .content {
        @include flexbox(row, wrap, space-between, center);
        height: inherit;
        line-height: inherit;            
        
    }
}

// Toggle
.toggle-link {
    @media screen and (min-width: $mainnav-collapse) {
        display: none;
    }
}

.dropdown-content {
    @include shadow(1);
    background-color: #FFFFFF;
    margin: 0;
    display: none;
    min-width: 100px;
    max-height: 650px;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    white-space: nowrap; // Force one line
    z-index: 110;
    will-change: width, height;
    padding: 0;
    
    li {
        display: block !important;
        clear: both;
        color: $accent-color;
        cursor: pointer;
        line-height: 1.5rem;
        width: 100%;
        text-align: left;
        text-transform: none;
        padding: 0 !important;

        &:hover, &.active {
            background-color: #eee;
        }
        & > a,
        & > span {
            box-sizing: border-box;
            font-size: 1.2rem;
            color: $accent-color !important;
            display: block;
            padding: 1rem 1rem;
        }
    }
}