
/*
 * We have 4 states of the secondary navigation:
 * Small mode: (triggered by menu-'hamburger' ):
 * - Hidden (#navpage-wrapper.nav-secondary-opened not set)
 * - Shown (#navpage-wrapper.nav-secondary-opened set)
 * Large mode (triggered by expand/collapse button):
 * - Expanded (#navpage-wrapper.nav-secondary-collapsed not set)
 * - Collapsed (#navpage-wrapper.nav-secondary-collapsed set)
 */

/**** MODE: Hidden ****/

#navpage-secondary {
    visibility: visible;
    display: block;
    z-index: $zindex-secondary-nav; // We must use a ridiculous value like this, because Symfony's dumper uses 100000.
    position: absolute;
    width: $nav-secondary-small-width;
    padding-top: $nav-secondary-top-padding;
    height: 100%;
    left: -$nav-secondary-small-width;
    transition: left 0.1s, width 0.1s;
    box-shadow: -5px 0 0 rgba(0, 0, 0, 0.15) inset;
    background: $sidebarbackground;
    color: $sidebartextcolour;
    font-size: 120%;

    ul.submenu {
        @include hide();
        font-size: 90%;
        background: lighten($sidebarbackground, 10);

        &.show {
            @include show();
        }

        & > li.subdivider {
            border-top: 1px dashed lighten($sidebarbackground, 20);
        }

        a {
            padding: $nav-secondary-v-padding $nav-secondary-h-padding $nav-secondary-v-padding ($nav-secondary-h-padding + $nav-secondary-indent);
            text-indent: -$nav-secondary-indent;
            color: $sidebarlink;
            font-weight: normal;

            @media (max-width: 640px) {
                padding: ($nav-secondary-v-padding - 2px) $nav-secondary-h-padding ($nav-secondary-v-padding - 2px) ($nav-secondary-h-padding + $nav-secondary-indent);
            }

            i {
                width: $nav-secondary-icon-size;
                margin-right: $nav-secondary-icon-margin;
                text-indent: 0;
            }
        }
    }
}

/**** MODE: Shown ****/

.nav-secondary-opened {

    #navpage-secondary {
        left: 0;
    }
}

/**** MODE: Expanded ****/

@include respond-to(medium-screens) {
    #navpage-secondary {
        width: $nav-secondary-large-width;
        left: 0;
        position: absolute;
        font-size: 100%;

        & > ul {
            width: $nav-secondary-large-width;
        }
    }
}

/**** MODE: Collapsed ****/

@include respond-to(medium-screens) {
    #navpage-wrapper.nav-secondary-collapsed {

        #navpage-secondary {
            width: $nav-secondary-collapsed-width;
            overflow: hidden;
            box-shadow: -5px 0px 0px rgba(0, 0, 0, 0.2) inset;
            color: $sidebartextcolourcollapsed;

            .nav > li {
                a {
                    color: $sidebartextcolourcollapsed;
                }
            }
        }

    }

    #navpage-wrapper.nav-secondary-collapsed-hoverable {

        #navpage-secondary:hover {
            width: $nav-secondary-large-width;
            overflow: visible;
            box-shadow: 8px 0px 0px rgba(0, 0, 0, 0.2);
            color: $sidebartextcolour;

            .nav > li {
                a {
                    color: $sidebarlink;
                }
            }
        }
    }

}

/* --------------- */

#navpage-secondary .nav > li {
    & > a,
    & > form,
    & > em {
        padding: ($nav-secondary-v-padding + 4px) $nav-secondary-h-padding $nav-secondary-v-padding ($nav-secondary-h-padding + $nav-secondary-indent + 2px);
        color: $sidebarlink;
        display: block;
        //text-indent: -$nav-secondary-indent;
        font-weight: normal;
        max-height: 3.6em;
        overflow: hidden;
        cursor: pointer;
    }
    &.nav-secondary-dashboard {
        & > a {
            padding: ($nav-secondary-v-padding + 4px) $nav-secondary-h-padding ($nav-secondary-v-padding + 4px) ($nav-secondary-h-padding + $nav-secondary-indent + 2px);
        }
    }

    a.menu-pop {
      @include ellipsis();
    }

    a.menu-pop:before {
        display: inline-block;
        font-family: fontawesome;
        float: right;
        content: "\f0da";
        text-indent: 0;
        font-size: 120%;
        padding-left: 4px;
        color: darken($sidebarlink, 25);
        line-height: ($nav-secondary-icon-size - 2px);
    }

    &:hover > a,
    a:focus {
        color: $sidebarlinkhover;
        background: $sidebarbackgroundhover;
        i.icon {
            background: $sidebarlinkhover;
        }
    }

    & > em {
        font-weight: bold;
        font-style: normal;
        color: lighten($sidebarbackgroundactive, 40);

        i.icon {
            background: none;
            color: lighten($sidebarbackgroundactive, 40);
            top: 17px;
        }
    }

    &.active > a {
        color: $sidebarlinkactive;
        background: $sidebarbackgroundactive;
        i.icon {
            background: $sidebarlinkactive;
        }
    }

    &.divider {
        @include nav-secondary-divider();
    }

    &.search {
        padding-bottom: $nav-secondary-divider-margin;

        form {
            margin: 0;
            padding-top: 0;
            border: none;
            box-shadow: none;
        }

        .form-group {
            vertical-align: middle;
            display: inline-block;
            width: ($nav-secondary-small-width - (2 * $nav-secondary-h-padding) - $nav-secondary-indent - 4px);
            text-indent: 0;
            margin: 0;
        }

        .select2-container {
            padding: 4px 8px;
        }

        i.icon {
            background: none;
            color: $sidebarlink;
        }

        @include respond-to(medium-screens) {
            @include hide();
        }
    }

    i.icon {
        display: block;
        margin-right: $nav-secondary-icon-margin;
        width: $nav-secondary-icon-size;
        height: $nav-secondary-icon-size;
        line-height: $nav-secondary-icon-size;
        text-align: center;
        vertical-align: baseline;
        text-indent: 0;
        font-style: normal;
        font-weight: bold;
        background: $sidebarlink;
        border-radius: 3px;
        font-size: ($nav-secondary-icon-size - 8px);
        color: #333;
        position: absolute;
        left: 12px;
        top: 10px;

        &:before {
            font-weight: normal;
        }
    }

    .popover.right {
        margin-left: -16px;
    }

    .popover-content {
        z-index: 20;
        color: #444;
        padding: 3px;
        overflow: hidden;
        text-indent: 0;

        a {
            $indent: 32px;

            display: block;
            padding: 4px 6px 4px 4px;
            background: transparent;
            color: $dropdown-link-color !important;
            font-size: 100%;
            text-indent: -$indent;
            padding-left: $indent;
            text-overflow: ellipsis;
            white-space: nowrap;

            i {
                width: $indent;
                text-indent: 0;
            }
        }

        a:hover {
            color: $dropdown-link-hover-color !important;
            background-color: $dropdown-link-hover-bg;
            text-decoration: none;
        }

        hr {
            margin: 4px 0;
            padding: 0 8px;
        }
    }
}

.arrow {
    float: right;
}

.fa.arrow:before {
    content: "\f104";
}

.active > a > .fa.arrow:before {
    content: "\f107";
}

/**** Collapse/expand buttons ****/

/* Never show mall mode */

.nav-secondary-collapse,
.nav-secondary-expand {
    @include nav-secondary-divider();
    @include hide();
    i.icon {
        background: none !important;
        color: $sidebarlink !important;
    }
}

@include respond-to(medium-screens) {
    .nav-secondary-collapse {
        @include show();
    }
    .nav-secondary-expand {
        @include hide();
    }
    .nav-secondary-collapsed {
        .nav-secondary-collapse {
            @include hide();
        }
        .nav-secondary-expand {
            @include show();
        }
    }
}

// Hack to get magnific popup displayed properly.
body.mfp-zoom-out-cur #navpage-secondary {
    z-index: 1000;
}

// Override for Magnific popup, since we pull it in with our build process.
body .mfp-bottom-bar {
    min-width: 240px;
}
