/* ------------------------------------------------------------------------------
*
*  # Navbar component
*
*  Overrides for navbar bootstrap component
*
*  Version: 1.3
*  Latest update: Aug 10, 2016
*
* ---------------------------------------------------------------------------- */


// Basic styles
// -------------------------

// Base
.navbar {
    margin-bottom: 0;
    border-width: 0;
    padding-left: 0;
    padding-right: 0;
    .box-shadow(@shadow-depth1);
    
    // Desktop view
    @media (min-width: @grid-float-breakpoint) {
        padding-left: @navbar-padding-horizontal;
        padding-right: @navbar-padding-horizontal;
    }
}


//
// Navbar as a stand alone component
//

.navbar-component {
    border-radius: @border-radius-base;
    margin-bottom: @line-height-computed;
    .box-shadow(@shadow-depth1);

    // Set horizontal padding
    .navbar&,
    > .navbar {
        @media (min-width: @grid-float-breakpoint) {
            padding-left: @navbar-padding-horizontal;
            padding-right: @navbar-padding-horizontal;
        }
    }
    
    // Remove shadow from children navbars
    > .navbar {
        .box-shadow(none);
    }

    // Inside page header
    .page-header & {
        margin-left: @grid-gutter-width;
        margin-right: @grid-gutter-width;
    }

    // Default navbar inside panel    
    .panel &.navbar-default {
        border-width: 1px;
        .box-shadow(none);
    }
    
    // Inverse navbar inside panel 
    .panel &.navbar-inverse {
        .box-shadow(none);
    }

    // First child border radius
    > .navbar:first-child,
    > .navbar-collapse:first-child > .navbar:first-child {
        .border-top-radius(@border-radius-base);
    }

    // Last child border radius
    > .navbar:last-child,
    > .navbar-collapse:last-child > .navbar:last-child {
        .border-bottom-radius(@border-radius-base);
    }
}


//
// Navbar with affix component
//

.affix {
    &.navbar,
    &.navbar-collapse {
        z-index: @zindex-navbar-fixed;
        top: 0;
        width: 100%;

        // Make it static on mobile
        @media (max-width: @grid-float-breakpoint-max) {
            position: static;
        }
    }
}


// Navbar header
// -------------------------

.navbar-header {
    min-width: @sidebar-base-width;

    // Inside nav collapse
    .navbar-collapse > & {
        margin-left: 0;
    }

    // Mobile nav
    .navbar-nav {
        float: right;
        margin-right: (@navbar-padding-horizontal - @content-padding-base);

        // Nav item
        > li {
            float: left;

            // Links
            > a {
                padding-left: @content-padding-base;
                padding-right: @content-padding-base;
            }
        }
    }

    // Mobile view setup
    @media (max-width: @grid-float-breakpoint-max) {
        .navbar-nav > li + li {
            margin-top: 0;
        }

        .navbar-collapse > & {
            margin-left: 0;
        }
    }

    // Desktop view setup
    @media (min-width: @grid-float-breakpoint) {
        margin-left: -(@navbar-padding-horizontal);
    }
}


// Navbar collapse (body)
// -------------------------

.navbar-collapse {
    text-align: center; // Make elements centered on mobiles
    padding-left: 0;
    padding-right: 0;

    // Remove animation since it's buggy on mobile
    &.collapsing {
        .transition-duration(0.00000001s);
    }

    // Remove top border in second navbar
    .navbar + & {
        border-top: 0;
    }

    // Desktop view setup
    @media (min-width: @grid-float-breakpoint) {
        text-align: left;
        margin-left: -(@navbar-padding-horizontal);
    }
}


// Highlighted navbar header
// -------------------------

.header-highlight {

    // Header
    .navbar-header {

        // Darken header
        &:not([class*=bg-]) {
            background-color: @sidebar-dark-bg;
        }

        // Make links in navbar header as in inverse navbar
        > .navbar-nav {
            > li > a {
                color: @navbar-inverse-link-color;

                &:hover,
                &:focus {
                    color: @navbar-inverse-link-hover-color;
                    background-color: @navbar-inverse-link-hover-bg;
                }
            }
        }

        // Desktop view setup
        @media (min-width: @grid-float-breakpoint) {

            // In mini sidebar
            .sidebar-xs & {
                min-width: 0;
                width: @sidebar-mini-width;
                padding-left: 0;

                // Change logo
                .navbar-brand {
                    padding-left: 0;
                    padding-right: 0;
                    background: url(../images/logo_icon_light.png) no-repeat center center;
                    background-size: auto 16px;
                    float: none;
                    display: block;

                    > img {
                        display: none;
                    }
                }
            }

            // Hide if main sidebar is hidden
            .sidebar-main-hidden &,
            .sidebar-all-hidden & {
                display: none;
            }
        }
    }

    // If fixed sidebar is mini, when expanded
    .sidebar-fixed-expanded & {
        @media (min-width: @grid-float-breakpoint) {
            .navbar-collapse {
                margin-left: @sidebar-mini-width - 20;
            }

            // Make header fixed as sidebar
            .navbar-header {
                position: fixed;
                z-index: 99;
            }
        }
    }
}



// Fixed navbar setup
// -------------------------

// Reverse shadow in bottom navbar
.navbar-fixed-bottom,
.navbar-fixed-bottom > .navbar {
    .box-shadow(@shadow-depth1-reversed);
}

// Make top navbars static on mobile
@media (max-width: @grid-float-breakpoint-max) {
    .navbar-fixed-top {
        position: static;
    }
}

// Fixed navbar vertical spacing
@media (min-width: @grid-float-breakpoint) {

    //
    // Single navbar
    //

    // Top
    .navbar-top-lg {
        padding-top: @navbar-height-large;

        // Sticky fixed sidebar
        .sidebar-fixed.affix {
            top: @navbar-height-large + @line-height-computed;
        }
    }
    .navbar-top {
        padding-top: @navbar-height;

        // Sticky fixed sidebar
        .sidebar-fixed.affix {
            top: @navbar-height + @line-height-computed;
        }
    }
    .navbar-top-sm {
        padding-top: @navbar-height-small;

        // Sticky fixed sidebar
        .sidebar-fixed.affix {
            top: @navbar-height-small + @line-height-computed;
        }
    }
    .navbar-top-xs {
        padding-top: @navbar-height-mini;

        // Sticky fixed sidebar
        .sidebar-fixed.affix {
            top: @navbar-height-mini + @line-height-computed;
        }
    }


    //
    // Multiple navbars
    //

    // Top navbars. Double navbar height
    .navbar-top-lg-lg {
        padding-top: @navbar-height-large + @navbar-height-large;
    }
    .navbar-top-lg-md,
    .navbar-top-md-lg {
        padding-top: @navbar-height + @navbar-height-large;
    }
    .navbar-top-lg-sm,
    .navbar-top-md-md,
    .navbar-top-sm-lg {
        padding-top: @navbar-height + @navbar-height;
    }
    .navbar-top-lg-xs,
    .navbar-top-md-sm,
    .navbar-top-sm-md,
    .navbar-top-xs-lg {
        padding-top: @navbar-height + @navbar-height-small;
    }
    .navbar-top-md-xs,
    .navbar-top-sm-sm,
    .navbar-top-xs-md {
        padding-top: @navbar-height + @navbar-height-mini;
    }
    .navbar-top-sm-xs,
    .navbar-top-xs-sm {
        padding-top: @navbar-height-small + @navbar-height-mini;
    }
    .navbar-top-xs-xs {
        padding-top: @navbar-height-mini + @navbar-height-mini;
    }
}

// Bottom
.navbar-bottom-lg {
    padding-bottom: @navbar-height-large;
}
.navbar-bottom {
    padding-bottom: @navbar-height;
}
.navbar-bottom-sm {
    padding-bottom: @navbar-height-small;
}
.navbar-bottom-xs {
    padding-bottom: @navbar-height-mini;
}

// Bottom navbars. Double navbar height vertical borders
.navbar-bottom-lg-lg {
    padding-bottom: @navbar-height-large + @navbar-height-large;
}
.navbar-bottom-lg-md,
.navbar-bottom-md-lg {
    padding-bottom: @navbar-height + @navbar-height-large;
}
.navbar-bottom-lg-sm,
.navbar-bottom-md-md,
.navbar-bottom-sm-lg {
    padding-bottom: @navbar-height + @navbar-height;
}
.navbar-bottom-lg-xs,
.navbar-bottom-md-sm,
.navbar-bottom-sm-md,
.navbar-bottom-xs-lg {
    padding-bottom: @navbar-height + @navbar-height-small;
}
.navbar-bottom-md-xs,
.navbar-bottom-sm-sm,
.navbar-bottom-xs-md {
    padding-bottom: @navbar-height + @navbar-height-mini;
}
.navbar-bottom-sm-xs,
.navbar-bottom-xs-sm {
    padding-bottom: @navbar-height-small + @navbar-height-mini;
}
.navbar-bottom-xs-xs {
    padding-bottom: @navbar-height-mini + @navbar-height-mini;
}



// Brand/project name
// -------------------------

.navbar-brand {

    // Logo, change according to your logo size
    > img {
        margin-top: 2px;
        height: 16px;
    }
}


// Navbar nav links
// -------------------------

.navbar-nav {
    margin: 0;
    text-align: left;

    // Links
    > li > a {
        padding-top: @navbar-padding-vertical;
        padding-bottom: @navbar-padding-vertical;

        // Add bottom highlight
        &:after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            background-color: transparent;
            width: 2px;

            // Desktop view
            @media (min-width: @grid-float-breakpoint) {
                top: auto;
                right: 0;
                width: auto;
                height: 2px;
            }
        }


        //
        // Labels and badges
        //

        // Right absolute
        > .label,
        > .badge {
            position: absolute;
            top: 0;
            right: 0;
        }
        
        // Status mark
        > .status-mark {
            position: absolute;
            top: 8px;
            right: 8px;
        }
        
        // Left alignment
        > .status-mark-left {
            right: auto;
            left: 8px;
        }

        // Left absolute
        > .label-left,
        > .badge-left {
            right: auto;
            left: 0;
        }

        // Inline
        > .label-inline,
        > .badge-inline,
        > .status-mark-inline {
            position: static;
        }
    }

    // Language switch images
    .language-switch {

        // Top level items
        > a > img {
            position: relative;
            top: -1px;
        }

        // Inside dropdown menu
        .dropdown-menu > li > a > img {
            margin-top: (@line-height-computed - 11) / 2;
        }
    }

    // User dropdown
    > .dropdown-user {

        // Links
        > a {

            // Set vertical padding
            &,
            > span {
                padding-top: (@navbar-padding-vertical / 2);
                padding-bottom: (@navbar-padding-vertical / 2);
            }

            // User name
            > span {
                display: inline-block;
            }

            // Add horizontal spacing if image is used
            > img + span {
                padding-left: @element-horizontal-spacing;
            }
        }

        // User image
        img {
            max-height: (@navbar-padding-vertical * 2) + 4;
            margin-top: -((@navbar-padding-vertical / 2) - 4);
            border-radius: 50%;

            // Change image size in large navbar
            .navbar-lg & {
                max-height: (@navbar-padding-vertical-large * 2) + 4;
                margin-top: -((@navbar-padding-vertical-large / 2) - 4);
            }

            // Change image size in small navbar
            .navbar-sm & {
                max-height: (@navbar-padding-vertical-small * 2) + 4;
                margin-top: -((@navbar-padding-vertical-small / 2) - 4);
            }

            // Change image size in mini navbar
            .navbar-xs & {
                max-height: (@navbar-padding-vertical-mini * 2) + 4;
                margin-top: -((@navbar-padding-vertical-mini / 2) - 4);
            }
        }
    }

    // Make dropdown menu static on mobile
    @media (max-width: @grid-float-breakpoint-max) {
        .navbar-collapse & {
            padding-top: @list-spacing;
            padding-bottom: @list-spacing;
        }

        // Dropdowns get custom display when collapsed
        .open .dropdown-menu {

            // Make paddings identical
            > li > a,
            .dropdown-header {
                padding: (@padding-base-vertical + 1) @navbar-padding-horizontal;
            }

            // Dropdown submenu
            > .dropdown-submenu {

                // Add some space for children levels
                > ul > li {
                    > a {
                        padding-left: (@navbar-padding-horizontal * 2);
                    }

                    > ul > li {
                        > a {
                            padding-left: (@navbar-padding-horizontal * 3);
                        }
                    }
                }
            }
        }

        // Add 1px top separation
        > li + li {
            margin-top: 1px;
        }

        // Stick labels, badges and caret to the right
        > li > a {
            padding-left: @navbar-padding-horizontal;
            padding-right: @navbar-padding-horizontal;

            // Caret
            .caret {
                float: right;
                margin-top: ((@line-height-computed - @icon-font-size) / 2);
                margin-left: 5px;
            }

            // Labels and badges
            .label,
            .badge {
                position: static;
                float: right;
            }

            // Status mark
            .status-mark {
                position: static;
                float: right;
                margin-top: ((@line-height-computed - 8) / 2);
            }
        }

        // Caret in user dropdown
        > .dropdown-user .caret {
            margin-top: (@icon-font-size / 2);
        }

        // Remove border from the last nav
        &:last-child {
            border-bottom: 0;
        }
    }

    // Uncollapse the nav
    @media (min-width: @grid-float-breakpoint) {
        margin-left: @navbar-padding-horizontal;
    }
}


// Navbar form
// -------------------------

.navbar-form {
    padding: @navbar-padding-vertical @navbar-padding-horizontal;
    margin-left: 0;
    margin-right: 0;
    border-top: 0;
    .box-shadow(none);

    // Remove border from the last child
    &:last-child {
        border-bottom: 0;
    }

    // Form group row
    .form-group {
        @media (max-width: @grid-float-breakpoint-max) {
            margin-bottom: (@line-height-computed / 2);
        }
    }


    //
    // Elements sizing
    //

    // Small elements sizing
    .input-sm,
    .input-group-sm,
    .btn-sm,
    .select-sm,
    .uploader-sm {
        margin-top: (@input-height-base - @input-height-small) / 2;
        margin-bottom: (@input-height-base - @input-height-small) / 2;
    }
    .input-sm + .form-control-feedback {
        top: (@input-height-base - @input-height-small) / 2;
    }

    // Mini elements sizing
    .input-xs,
    .input-group-xs,
    .btn-xs,
    .select-xs,
    .uploader-xs {
        margin-top: (@input-height-base - @input-height-mini) / 2;
        margin-bottom: (@input-height-base - @input-height-mini) / 2;
    }
    .input-xs + .form-control-feedback {
        top: (@input-height-base - @input-height-mini) / 2;
    }

    // Navbar sizing vertical padding correction
    .navbar-lg & {
        .navbar-large-vertical-align(@input-height-base);
    }
    .navbar-sm & {
        .navbar-small-vertical-align(@input-height-base);
    }
    .navbar-xs & {
        .navbar-mini-vertical-align(@input-height-base);
    }

    // Checkboxes, radios, toggles
    .checkbox-switchery[class*=switchery-] {
        margin-bottom: 0;
    }
    .checkbox-inline.switchery-double {
        padding-left: 0;
    }


    // Desktop view setup
    @media (min-width: @grid-float-breakpoint) {
        padding: 0;

        // Set min width
        .form-control {
            min-width: 200px;
        }

        // Add left margin to form rows
        .form-group {
            margin-left: @navbar-padding-horizontal;
        }

        // Inline controls
        .checkbox-inline,
        .radio-inline {
            margin-top: ((@input-height-base - @line-height-computed) / 2); // ((base input height - line height in px) / 2)
            margin-bottom: ((@input-height-base - @line-height-computed) / 2);
        }
    }

    // Remove margins
    @media (max-width: @grid-float-breakpoint-max) {
        margin: 0;
    }
}


// Dropdown menus
// -------------------------

// Menu components
.navbar-nav > li > .dropdown-menu {
    border-top-width: 0;

    // Media list
    .media-list {
        max-height: @navbar-collapse-max-height;
        overflow-y: auto;
    }
}

// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
    border-top-width: 1px;
    border-bottom-width: 0;
    .border-top-radius(@border-radius-base);
}


// Buttons in navbars
// -------------------------

.navbar-btn {
    margin-left: @navbar-padding-horizontal;

    // Sizing
    &,
    .navbar-sm &.btn-sm,
    .navbar-xs &.btn-xs {
        .navbar-vertical-align(@input-height-base);
    }
    .navbar-lg & {
        .navbar-large-vertical-align(@input-height-base);
    }
    .navbar-sm &,
    .navbar-xs &.btn-sm {
        .navbar-small-vertical-align(@input-height-base);
    }
    .navbar-xs & {
        .navbar-mini-vertical-align(@input-height-base);
    }

    &.btn-sm,
    .navbar-sm &.btn-xs {
        .navbar-vertical-align(@input-height-small);
    }
    &.btn-xs,
    .navbar-lg &.btn-sm {
        .navbar-vertical-align(@input-height-mini);
    }
    .navbar-lg &.btn-xs {
        .navbar-large-vertical-align(@input-height-mini);
    }

    // Add margin to buttons on desktop
    @media (max-width: @grid-float-breakpoint-max) {
        &,
        &.btn-sm,
        &.btn-xs {
            margin: @navbar-padding-vertical @navbar-padding-horizontal;
        }

        // Multiple buttons
        & + & {
            margin-left: 0;
        }
    }
}


// Text in navbars
// -------------------------

.navbar-text {
    margin: 0;
    padding: @navbar-padding-vertical @navbar-padding-horizontal;

    // Last text doesn't have border
    &:last-child {
        border-bottom: 0;
    }


    //
    // Additional sizing
    //

    // Large
    .navbar-lg & {
        padding-top: ((@navbar-height-large - @line-height-computed) / 2);
        padding-bottom: ((@navbar-height-large - @line-height-computed) / 2);
    }

    // Small
    .navbar-sm & {
        padding-top: ((@navbar-height-small - @line-height-computed) / 2);
        padding-bottom: ((@navbar-height-small - @line-height-computed) / 2);
    }

    // Mini
    .navbar-xs & {
        padding-top: ((@navbar-height-mini - @line-height-computed) / 2);
        padding-bottom: ((@navbar-height-mini - @line-height-computed) / 2);
    }

    // Setup desktop view
    @media (min-width: @grid-float-breakpoint) {
        padding-right: 0;

        + .navbar-nav {
            margin-left: @content-padding-base;
        }

        .navbar-header + &:first-child {
            padding-left: 0;
        }
    }
}


// Component alignment
// -------------------------

@media (min-width: @grid-float-breakpoint) {
    .navbar-right {
        margin-right: 0;
    }
}


// Alternate navbars
// -------------------------

// Default navbar
.navbar-default {

    // Dropdown menu items
    .navbar-nav {
        
        // Highlight in default navbar
        > .active > a:after {
            background-color: @color-indigo-300;
        }

        // Dropdown menu
        > li > .dropdown-menu {
            border-top-width: 1px;
            border-top-color: @navbar-default-border;
        }

        // Mobile setup    
        @media (max-width: @grid-float-breakpoint-max) {

            // Dropdowns get custom display when collapsed
            .open .dropdown-menu {
                color: @text-color;
                background-color: transparent;
                border-bottom: 1px solid @navbar-default-border;
            }

            // Borders in dropdowns first level only
            .open > .dropdown-menu {
                border-top: 1px solid @navbar-default-border;
            }

            // Remove bottom borders from last childs
            .open:last-child .dropdown-menu {
                border-bottom: 0;
            }
        }
    }

    // Links in navbars
    .navbar-link {
        color: @link-color;

        // Link hover state
        &:hover {
            color: @link-hover-color;
        }
    }

    // Setup mobile view
    @media (max-width: @grid-float-breakpoint-max) {

        // Navbar collapse
        .navbar-collapse {
            .navbar-nav {
                border-bottom: 1px solid @navbar-default-border;
            }
        }

        // Active submenu link color in solid menu
        .dropdown-menu[class*=bg-] {

            // Make labels/badges colored
            .label,
            .badge {
                color: #fff;
                background-color: @brand-primary;
                border-color: transparent;
            }

            // Correct divider bg color
            > .divider {
                background-color: @dropdown-divider-bg;
            }

            // Submenu links
            .dropdown-submenu {
                &:hover > a,
                &:focus > a {
                    background-color: @dropdown-link-hover-bg;
                }
            }
        }

        // Remove border from table
        .dropdown-menu {
            .table-responsive {
                border-width: 0;
            }

            .dropdown-content-heading + .table-responsive {
                border-top-width: 1px;
            }
        }

        // Toggle button in alt navbars
        .navbar-text:not([data-toggle="collapse"]) {
            border-bottom: 1px solid @navbar-default-border;
        }
        > .navbar-nav > li > a {
            &:not(.collapsed),
            &:hover,
            &:focus {
                background-color: #fcfcfc;
            }
        }
    }
}


// Inverse navbar
.navbar-inverse {
    color: @navbar-inverse-color;

    // Navbar form
    .navbar-form {

        // Form components
        .form-control,
        .form-control-feedback,
        .input-group-addon {
            color: #fff;
        }

        // Inputs
        .form-control {
            border-bottom-color: fade(#fff, 30%);
            .placeholder(@input-placeholder-light);

            // Focused
            &:focus {
                border-bottom-color: #fff;
                .box-shadow(0 1px 0 #fff);
            }
        }
    }

    // Nav dropdowns
    .navbar-nav {

        // Mute link color
        > li > a {
            color: fade(#fff, 90%);
        }

        // Highlight in default navbar
        > .active > a:after {
            background-color: #fff;
        }

        // Mobile setup
        @media (max-width: @grid-float-breakpoint-max) {

            // Dropdowns get custom display
            .open .dropdown-menu {
                color: @navbar-inverse-link-color;
                background-color: fade(#000, 10%);
                border-bottom: 1px solid fade(#fff, 10%);

                // Muted and annotation texts
                .text-muted,
                .media-annotation {
                    color: fade(#fff, 80%);
                }

                // Linked media list colors
                .media-list-linked {
                    > li {
                        border-top-color: fade(#fff, 10%);
                    }

                    // Media link
                    .media-link {
                        color: @navbar-inverse-link-color;

                        // Hover/focus state
                        &:hover,
                        &:focus {
                            background-color: fade(#000, 10%);
                            color: @navbar-inverse-link-color;
                        }
                    }
                }

                // Checkbox
                .checker {
                    span {
                        border-color: #fff;
                        color: #fff;

                        // Checked
                        &.checked {
                            border-color: transparent;
                        }
                    }
                }

                // Radio
                .choice {
                    span {
                        border-color: #fff;
                    }
                }

                // Form controls
                .form-control,
                .form-control-feedback,
                .input-group-addon,
                .select2-selection__placeholder {
                    color: #fff;
                }

                // Inputs
                .form-control {
                    border-bottom-color: fade(#fff, 30%);
                    .placeholder(@input-placeholder-light);

                    // Focused
                    &:focus {
                        border-bottom-color: #fff;
                        .box-shadow(0 1px 0 #fff);
                    }
                }

                // Select2 selects
                .select2-selection--single:not([class*=bg-]):not([class*=border-]) {
                    border-bottom-color: fade(#fff, 30%);
                }
                .select2-container--focus,
                .select2-container--open {
                    .select2-selection--single:not([class*=bg-]):not([class*=border-]) {
                        border-bottom-color: #fff;
                        .box-shadow(0 1px 0 #fff);
                    }
                }

                // Links color
                a:not(.label-flat):not(.badge-flat):not(.disabled > a) {
                    color: @navbar-inverse-link-color;
                }

                // Divider
                .divider {
                    background-color: fade(#fff, 10%);
                }

                // Dropdown menu header
                > .dropdown-header {
                    color: fade(#fff, 60%);
                }

                // Dropdown submenu adaptation
                > .dropdown-submenu {
                    &:hover > a,
                    &:focus > a {
                        color: @navbar-inverse-link-hover-color;
                        background-color: @navbar-inverse-link-hover-bg;
                    }
                }
            }

            // Borders in dropdowns first level only
            .open > .dropdown-menu {
                border-top: 1px solid fade(#fff, 10%);
            }

            // Remove bottom borders from last childs
            .open:last-child .dropdown-menu {
                border-bottom: 0;
            }

            // Make labels and badges white
            .label,
            .badge {
                &,
                &:hover,
                &:focus {
                    background-color: #fff;
                    border-color: #fff;
                    color: @dropdown-link-color;
                }
            }

            // Make tabs transparent
            .nav-tabs {
                background-color: transparent;
                border: 0;

                // Links
                > li > a {
                    background-color: transparent;
                }
            }
        }
    }

    // Setup mobile view
    @media (max-width: @grid-float-breakpoint-max) {

        // Add darker bg to collapse
        .navbar-collapse {
            background-color: fade(#000, 5%);

            &,
            .navbar-nav {
                border-bottom: 1px solid fade(#fff, 10%);
            }
        }

        // Add bottom border to navbar text
        .navbar-text {
            border-bottom: 1px solid fade(#fff, 10%);
        }

        // Change links background color
        > .navbar-nav > li > a:not(.collapsed) {
            background-color: fade(#000, 10%);
        }

        // Adapt component colors to collapsed navbar
        .dropdown-menu {

            // Links
            .media-body a,
            .table a {
                color: #fff;
            }

            // Tables
            .table-responsive {
                border-width: 0 0 1px 0;
                border-color: fade(#fff, 10%);
            }
            .dropdown-content-heading + .table-responsive {
                border-top-width: 1px;
            }
            .table {
                th,
                td {
                    border-color: fade(#fff, 10%);
                }
            }
        }

        // Make flat elements white
        .label-flat,
        .badge-flat {
            border-color: #fff;
            color: #fff;
        }
        .btn-flat {
            &,
            &:hover,
            &:focus {
                border-color: #fff;
                color: #fff!important;
            }
        }
    }
}

// Raised navbar navigation
.navbar-nav-material {
    > li > a {
        text-transform: uppercase;
        font-size: @font-size-small;
        position: relative;
        font-weight: 500;
    }
}


// Navbar sizing
// ------------------------------

// Large
.navbar-lg {
    min-height: @navbar-height-large;

    // Brand
    .navbar-brand {
        height: @navbar-height-large;
        padding-top: @navbar-padding-vertical-large;
        padding-bottom: @navbar-padding-vertical-large;
    }

    // Nav
    .navbar-nav {

        // Items
        > li > a {
            padding-top: @navbar-padding-vertical-large;
            padding-bottom: @navbar-padding-vertical-large;
        }

        // User dropdown
        > .dropdown-user {
            > a {
                &,
                > span {
                    padding-top: @navbar-padding-vertical-large / 2;
                    padding-bottom: @navbar-padding-vertical-large / 2;
                }
            }
        }
    }
}

// Small
.navbar-sm {
    min-height: @navbar-height-small;

    // Brand
    .navbar-brand {
        height: @navbar-height-small;
        padding-top: @navbar-padding-vertical-small;
        padding-bottom: @navbar-padding-vertical-small;
    }

    // Nav
    .navbar-nav {

        // Items
        > li > a {
            padding-top: @navbar-padding-vertical-small;
            padding-bottom: @navbar-padding-vertical-small;
        }

        // User dropdown
        > .dropdown-user {
            > a {
                &,
                > span {
                    padding-top: @navbar-padding-vertical-small / 2;
                    padding-bottom: @navbar-padding-vertical-small / 2;
                }
            }
        }
    }
}

// Mini
.navbar-xs {
    min-height: @navbar-height-mini;

    // Brand
    .navbar-brand {
        height: @navbar-height-mini;
        padding-top: @navbar-padding-vertical-mini;
        padding-bottom: @navbar-padding-vertical-mini;
    }

    // Nav
    .navbar-nav {

        // Items
        > li > a {
            padding-top: @navbar-padding-vertical-mini;
            padding-bottom: @navbar-padding-vertical-mini;
        }

        // User dropdown
        > .dropdown-user {
            > a {
                &,
                > span {
                    padding-top: @navbar-padding-vertical-mini / 2;
                    padding-bottom: @navbar-padding-vertical-mini / 2;
                }
            }
        }
    }
}


// Mega menu
// ------------------------------

// Base
.mega-menu {

    // Disable direct absolute positioning
    .nav & {
        position: static;
    }

    // Remove left positioning
    .dropdown-menu {
        left: auto;
    }

    // Full width menu
    @media (min-width: @grid-float-breakpoint) {
        &.mega-menu-wide > .dropdown-menu {
            left: @grid-gutter-width;
            right: @grid-gutter-width;

            .navbar-component &,
            .layout-boxed & {
                left: 0;
                right: 0;
            }
        }
    }
}

// Mega menu header
.dropdown-content-heading {
    padding: @content-padding-large;
    font-size: @font-size-small;
    text-transform: uppercase;
    font-weight: 500;

    // Remove top padding if body placed after padding
    & + .dropdown-menu-body {
        padding-top: 0;
    }

    // Remove top padding from the next dropdown header
    & + .dropdown-header {
        padding-top: 0!important;
    }

    // If inside usual dropdown, padding correction
    ul.dropdown-menu & {
        padding-left: @content-padding-base;
        padding-right: @content-padding-base;

        &:first-child {
            padding-top: (@content-padding-large - @list-spacing);
            padding-bottom: (@content-padding-large - @list-spacing);
        }
    }

    // Display icons list always on the right side
    .icons-list {
        float: right;
    }

    // Add top border to the table inside dropdown
    & + .table-responsive {
        @media (min-width: @grid-float-breakpoint) {
            border-top: 1px solid @dropdown-border;
        }
    }
}

// Mega menu footer
.dropdown-content-footer {
    color: @text-color;
    border-top: 1px solid @dropdown-border;
    .border-bottom-radius(@border-radius-base);

    // Links
    a {
        display: block;
        padding: @content-padding-small @content-padding-large;
        text-align: center;
        color: @text-color;

        // Hover/focus states
        &:hover,
        &:focus {
            background-color: @dropdown-link-hover-bg;
        }

        // Remove top edge from the icon
        > i.display-block {
            top: 0;
        }
    }

    // Setup mobile view
    @media (max-width: @grid-float-breakpoint-max) {

        // In inversed navbar
        .navbar-inverse & {
            background-color: fade(#000, 10%);
            color: #fff;
            border-color: transparent;
            border-radius: 0;

            // Links should be white
            a {
                color: #fff;

                &:hover,
                &:focus {
                    background-color: fade(#000, 10%);
                }
            }
        }
    }
}

// Mega menu content
.dropdown-content-body {
    padding: @panel-body-padding;

    .dropdown-content-heading + & {
        padding-top: 0;
    }
}

// Remove vertical padding from content dropdown
.dropdown-content {
    &:not(ul) {
        padding-top: 0;
        padding-bottom: 0;
    }

    // Prevent wrap in inline form
    .form-inline {
        white-space: nowrap;
    }
}


// Mega menu list
// ------------------------------

// Base
.menu-list {
    margin: 0 0 @line-height-computed 0;
    list-style: none;
    padding: 0;
    overflow: hidden;

    @media (min-width: @screen-lg-min) {
        [class*=col-lg-] & {
            margin-bottom: (@padding-base-vertical + 1);
        }
    }

    @media (min-width: @screen-md-min) {
        [class*=col-md-] & {
            margin-bottom: (@padding-base-vertical + 1);
        }
    }

    @media (min-width: @screen-sm-min) {
        [class*=col-sm-] & {
            margin-bottom: (@padding-base-vertical + 1);
        }
    }

    @media (min-width: @screen-xs-min) {
        [class*=col-xs-] & {
            margin-bottom: (@padding-base-vertical + 1);
        }
    }

    // Children lists
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        display: none;
        left: 110%;
        width: 100%;
    }

    // Menu item
    li {
        position: relative;
        margin-top: 1px;

        &:first-child {
            margin-top: 0;
        }

        // Link
        > a {
            display: block;
            color: @dropdown-link-color;
            padding: @padding-base-vertical @padding-base-horizontal;
            border-radius: @border-radius-base;

            &:hover,
            &:focus {
                background-color: @dropdown-link-hover-bg;
            }

            > i {
                margin-right: @content-padding-small;
            }

            > .label,
            > .badge {
                float: right;
                margin-left: @element-horizontal-spacing;
            }
        }

        // Active item
        &.active > a {
            &,
            &:hover,
            &:focus {
                color: @dropdown-link-active-color;
                background-color: @dropdown-link-active-bg;
            }
        }

        // Disabled item
        &.disabled {
            > a {
                &,
                &:hover,
                &:focus {
                    background-color: transparent;
                    color: @dropdown-link-disabled-color;
                    cursor: @cursor-disabled;
                }

                // Mute elements
                > .label,
                > .badge,
                > img {
                    .opacity(0.8);
                }
            }
        }
    }

    // Setup mobile view
    @media (max-width: @grid-float-breakpoint-max) {
        li {

            // Link
            > a {
                color: #fff;

                &:hover,
                &:focus {
                    background-color: fade(#000, 10%);
                }
            }

            // Active state
            &.active > a {
                &,
                &:hover,
                &:focus {
                    background-color: fade(#000, 10%);
                }
            }

            // Disabled state
            &.disabled > a {
                &,
                &:hover,
                &:focus {
                    background-color: transparent;
                    color: fade(#fff, 60%);
                    cursor: @cursor-disabled;
                }
            }
        }

        // List items in default navbar
        .navbar-default & {
            li {

                // Link
                > a {
                    color: @dropdown-link-color;

                    &:hover,
                    &:focus {
                        background-color: @dropdown-link-hover-bg;
                    }
                }

                // Active state
                &.active > a {
                    &,
                    &:hover,
                    &:focus {
                        color: @dropdown-link-active-color;
                        background-color: @dropdown-link-active-bg;
                    }
                }

                // Disabled state
                &.disabled > a {
                    &,
                    &:hover,
                    &:focus {
                        background-color: transparent;
                        color: @dropdown-link-disabled-color;
                    }
                }
            }
        }
    }


    // Setup desktop view
    @media (min-width: @grid-float-breakpoint) {
        overflow-y: auto;
        max-height: @navbar-collapse-max-height;
    }
}

// Drill down menu
.dd-wrapper {

    // Menu
    .dd-menu {
        overflow: hidden;
        position: relative;
    }

    // Header
    .dd-header {
        h6 {
            .label,
            .badge {
                margin-left: @element-horizontal-spacing;
            }

            > i {
                margin-right: @element-horizontal-spacing;
            }

            &:first-child {
                display: none;
            }
        }
    }

    // Display child lists
    .dd-parent .active-ul + ul {
        position: relative;
        display: block;
        left: 0;
    }

    // "Back" link
    .link-back {
        display: block;
        padding: (@padding-base-vertical + 1) 0;
        border-radius: @border-radius-base;
        margin-bottom: (@line-height-computed / 2);
        font-size: @font-size-small;
        text-transform: uppercase;
        line-height: @line-height-small;

        // Arrow icon
        &:before {
            content: '\ede7';
            font-family: 'icomoon';
            font-size: @icon-font-size;
            line-height: 1;
            position: relative;
            top: -1px;
            vertical-align: middle;
            margin-right: @element-horizontal-spacing;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        // Hide default icon and use custom instead
        .dd-icon,
        i {
            display: none;
        }


        // Setup mobile view
        @media (max-width: @grid-float-breakpoint-max) {

            // Base and default navbar
            .navbar & {
                padding: @line-height-computed 0;
                text-align: center;
                margin-top: -(@line-height-computed / 2);
                margin-bottom: @line-height-computed;
                border-bottom: 1px solid @gray-lighter;
            }

            // Inverse navbar
            .navbar-inverse & {
                color: #fff;
                border-bottom-color: fade(#fff, 10%);
            }
        }
    }

    // Arrow icons
    .dd-icon {
        float: right;
        margin-top: ((@line-height-computed - @icon-font-size) / 2);

        // "Right" arrow and base
        &:after {
            content: '\e9c7';
            font-family: 'icomoon';
            font-size: @icon-font-size;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }

    // Use another icon in header
    .dd-header .dd-icon:after {
        content: '\e9c5';
    }
}

// Mega menu list heading
.menu-heading {
    display: block;
    font-size: @font-size-small;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: (@line-height-computed / 2);
    padding-top: ((@line-height-computed - @font-size-small) / 2);

    // Icons
    > i {
        float: left;
        margin-right: @element-horizontal-spacing;
    }

    // Underlined heading
    &.underlined {
        padding-bottom: (@line-height-computed / 2);
        border-bottom: 1px solid @gray-lighter;
    }


    // Setup mobile view
    @media (max-width: @grid-float-breakpoint-max) {
        color: #fff;

        // Remove top margin in the first item
        div:first-child > & {
            margin-top: 0;
        }

        // In default navbar
        .navbar-default & {
            color: @dropdown-link-color;
        }

        // Underlined
        &.underlined {
            border-bottom-color: fade(#fff, 10%);

            // In default navbar
            .navbar-default & {
                border-bottom-color: @gray-lighter;
            }
        }
    }
}


// Tabs inside navbar dropdowns
// ------------------------------

.dropdown-menu {
    .nav-tabs {

        // Remove border radius
        &,
        > li > a {
            border-radius: 0;
        }

        // Remove side borders from first and last tabs
        > li,
        > li.active {
            &:first-child > a {
                border-left: 0;
            }

            &:last-child > a {
                border-right: 0;
            }
        }


        // Setup mobile view
        @media (max-width: @grid-float-breakpoint-max) {
            margin-top: 0;

            // Remove helper label
            &:before {
                content: none;
            }

            // List item
            > li {

                // Add 1px gap between items
                & + li {
                    margin-top: 1px;
                }

                // Link
                > a {
                    border: 0;
                    padding-left: @navbar-padding-horizontal;
                    padding-right: @navbar-padding-horizontal;

                    &:hover,
                    &:focus {
                        background-color: fade(#000, 10%)
                    }
                }

                // Active state
                &.active {
                    > a,
                    > a:hover,
                    > a:focus {
                        border: 0;
                        background-color: fade(#000, 10%);
                    }
                }
            }

            // Common navbar styles
            .navbar & {
                border-top: 1px solid fade(#fff, 10%);
                border-bottom: 1px solid fade(#fff, 10%);

                > li {
                    margin-bottom: 0;
                }

                &.active > a {
                    border-color: transparent;
                }
            }

            // Inverse navbar
            .navbar-inverse & {
                > li {
                    > a {
                        color: #fff;
                    }

                    // Disabled state
                    &.disabled > a {
                        &,
                        &:hover,
                        &:focus {
                            color: fade(#fff, 60%);
                            background-color: transparent;
                        }
                    }
                }
            }

            // Default navbar
            .navbar-default & {
                border-top-color: @navbar-default-border;
                border-bottom-color: @navbar-default-border;
                border-left: 0;
                border-right: 0;

                // List item
                > li {

                    // Links hover state
                    > a:hover,
                    > a:focus {
                        color: @navbar-default-color;
                        background-color: @navbar-default-link-hover-bg;
                    }

                    // Active state
                    &.active > a {
                        &,
                        &:hover,
                        &:focus {
                            color: @navbar-default-color;
                            background-color: @navbar-default-link-hover-bg;
                        }
                    }

                    // Disabled state
                    &.disabled > a {
                        &,
                        &:hover,
                        &:focus {
                            color: @navbar-default-link-disabled-color;
                            background-color: @navbar-default-link-disabled-bg;
                        }
                    }
                }
            }
        }
    }
}


// Navbar progress bars
// ------------------------------

// Base
.navbar-progress {
    float: left;
    margin-left: @navbar-padding-horizontal;

    // Progress bar
    .progress {
        width: 200px;
    }

    // Setup mobile view
    @media (max-width: @grid-float-breakpoint-max) {
        margin: @navbar-padding-vertical @navbar-padding-horizontal;
        float: none;

        .progress {
            margin-top: 0;
            margin-bottom: 0;
            width: 100%;
        }
    }
}

// Sizing
.navbar-xs .navbar-progress .progress {
    .navbar-mini-vertical-align(@progress-base-height);
}
.navbar-progress .progress,
.navbar-xs .navbar-progress .progress-sm {
    .navbar-vertical-align(@progress-base-height);
}
.navbar-progress .progress-sm,
.navbar-xs .navbar-progress .progress-xs {
    .navbar-mini-vertical-align(@progress-mini-height);
}
.navbar-progress .progress-xs,
.navbar-xs .navbar-progress .progress-xxs {
    .navbar-mini-vertical-align(@progress-tiny-height);
}
.navbar-progress .progress-xxs {
    .navbar-vertical-align(@progress-tiny-height);
}
.navbar-sm .navbar-progress .progress {
    .navbar-small-vertical-align(@progress-base-height);
}
.navbar-lg .navbar-progress .progress,
.navbar-sm .navbar-progress .progress-sm {
    .navbar-large-vertical-align(@progress-base-height);
}
.navbar-lg .navbar-progress .progress-sm,
.navbar-sm .navbar-progress .progress-xs {
    .navbar-large-vertical-align(@progress-small-height);
}
.navbar-lg .navbar-progress .progress-xs,
.navbar-sm .navbar-progress .progress-xxs {
    .navbar-large-vertical-align(@progress-mini-height);
}
.navbar-lg .navbar-progress .progress-xxs {
    .navbar-large-vertical-align(@progress-tiny-height);
}


// Navbar inner dropdowns on mobiles
// ------------------------------

@media (max-width: @grid-float-breakpoint-max) {

    // Common navbar dropdown
    .navbar {
        .btn-group,
        .dropdown,
        .input-group {

            // Make dropdown full width with no borders
            .dropdown-menu {
                width: 100%;
                border-width: 0 0 1px 0;
                border-radius: 0;

                > li > a {
                    padding-left: @navbar-padding-horizontal;
                    padding-right: @navbar-padding-horizontal;
                }
            }
        }

        // Remove relative position from dropdown parents
        .btn-group,
        .input-group,
        .form-group:not(.has-feedback),
        .input-group-btn {
            position: static;
        }

        // Make select2 select full width
        .select2-container {
            width: 100%!important;
        }
    }

    // Bottom fixed navbar
    .navbar-fixed-bottom {
        .btn-group,
        .dropdown,
        .input-group {
            .dropdown-menu {
                border-width: 1px 0 0 0;
            }
        }
    }

    // Revert for navbar component
    .navbar-component {
        .btn-group,
        .dropdown,
        .input-group {
            .dropdown-menu {
                border-width: 0 1px 1px 1px;
                .border-bottom-radius(@border-radius-base);
            }
        }
    }

    // Remove bottom spacing from tables
    .table-responsive {
        margin-bottom: 0;
    }
}
