/* ------------------------------------------------------------------------------
*
*  # Navs related component
*
*  Overrides for navs related bootstrap component
*
*  Version: 1.3
*  Latest update: Aug 10, 2016
*
* ---------------------------------------------------------------------------- */


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

.nav {

    // Nav items
    > li {
        > a {

            // Remove outline on focus
            &:focus {
                outline: 0;
            }
        }

        // Disabled state sets text to gray and nukes hover/tab effects
        &.disabled > a {

            // Mute elements
            > .badge,
            > .label,
            > .status-mark,
            > img {
                .opacity(0.75);
            }
        }
    }

    // Open dropdowns
    .open > a {
        &,
        &:hover,
        &:focus {
            background-color: transparent;
            border-color: transparent;
            color: @gray-dark;
        }
    }

    // Optional sizing
    &.nav-lg > li > a {
        padding: @nav-link-padding-large;
    }
    &.nav-sm > li > a {
        padding: @nav-link-padding-small;
    }
    &.nav-xs > li > a {
        padding: @nav-link-padding-mini;
    }

    // Tabs nav image
    .tab-img {
        max-height: @line-height-computed;
        display: inline-block;
        vertical-align: top;
    }
}



// Tabs
// -------------------------

// Base styles
.nav-tabs {
    margin-bottom: @line-height-computed;

    // Tabs list item
    > li {
        float: none;

        // Actual tabs (as links)
        > a {
            margin-right: 0;
            color: @color-grey-400;
            border-radius: 0;

            // Hover/focus states
            &:hover,
            &:focus {
                background-color: transparent;
                border-color: transparent;
                color: @text-color;
            }

            // Right aligned icons
            > [class*=icon-].pull-right {
                float: right;
                margin-top: ((@line-height-computed - @icon-font-size) / 2);
            }
        }
    }


    //
    // Tab layouts
    //

    // Justified tabs
    // Needs to be dublicated. Sadly.
    &.nav-justified {
        .nav-tabs-justified();
    }


    // Tabs with highlighted top border
    &.nav-tabs-highlight {
        @media (min-width: @screen-sm-min) {
            > li {

                // Change border radius and top border width
                > a {
                    &,
                    &:hover,
                    &:focus {
                        border-top-width: 2px;
                    }
                }

                // Apply top border color. Replace it with any variable or color
                &.active > a {
                    &,
                    &:hover,
                    &:focus {
                        border-top-color: @brand-primary;
                    }
                }
            }
        }
    }


    // Tabs with top border
    &.nav-tabs-top {
        @media (min-width: @screen-sm-min) {

            // List items
            > li {
                margin-bottom: 0; // Remove bottom spacing

                // Change border radius and top border width
                > a {
                    &,
                    &:hover,
                    &:focus {
                        border: 0;
                    }

                    // Top highlight line
                    &:after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        height: 2px;
                    }
                }

                // Add top border on hover
                &.open > a,
                > a:hover,
                > a:focus {
                    &:after {
                        background-color: @nav-tabs-border-color;
                    }
                }

                // Apply top border color. Replace it with any variable or color
                &.active > a {

                    // Highlight background color
                    &:after {
                        background-color: @color-pink-300;
                    }

                    // States
                    &,
                    &:hover,
                    &:focus {
                        background-color: transparent;
                    }
                }
            }

            // Without bottom border
            &.top-divided {
                border-bottom-color: transparent;
            }
        }
    }


    // Tabs with bottom border
    &.nav-tabs-bottom {
        @media (min-width: @screen-sm-min) {

            // Tab nav item
            > li {
                margin-bottom: 0;

                // Link
                > a {
                    border-width: 0;
                    margin-bottom: -1px;

                    // Bottom highlight
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        height: 2px;
                    }
                }

                // Apply bottom border color and change width. Replace color with any variable or color
                &.active > a {

                    // Highlight background color
                    &:after {
                        background-color: @color-pink-300;
                    }

                    // States
                    &,
                    &:hover,
                    &:focus {
                        background-color: transparent;
                        border-width: 0;
                    }
                }
            }

            // Without bottom border
            &.bottom-divided {
                border-bottom-color: transparent;
            }
        }
    }


    // Tabs with custom solid background
    &[class*=bg-] {
        border-bottom: 0;

        // Add common styles for all bg color variations
        > li {
            margin-bottom: 0;

            // Link
            > a {
                color: #fff;
                border-width: 0;

                // Hover state
                &:hover,
                &:focus {
                    background-color: fade(#000, 5%);
                }
            }

            // Opened dropdown menu
            &.open:not(.active) > a {
                color: #fff;
                background-color: fade(#000, 5%);
            }
        }

        // Apply permanent darker color for active item
        > .active > a {
            &,
            &:hover,
            &:focus {
                background-color: fade(#000, 10%);
                border-width: 0;
                color: #fff;
            }
        }

        // Mute disabled links
        > .disabled > a {
            &,
            &:hover,
            &:focus {
                color: fade(#fff, 50%);
            }
        }

        // Setup desktop view
        @media (min-width: @screen-sm-min) {
            .tab-content-bordered & {
                .border-bottom-radius(0);
            }
        }
    }


    // Tabs with solid background
    &.nav-tabs-solid {

        // Links color
        > li > a {
            color: @text-color;
            
            // Remove border
            &,
            &:hover,
            &:focus {
                border-color: transparent;
            }
        }

        // Apply background color to active tab. Replace it with any variable or color
        > .active > a,
        > .active > a:hover,
        > .active > a:focus {
            background-color: @component-active-bg;
            border-color: @component-active-bg;
            color: #fff;
        }

        // Setup desktop view
        @media (min-width: @screen-sm-min) {

            // Set permanent background color
            background-color: @nav-tabs-solid-bg;
            border: 0;

            // Add border radius
            > li {
                margin-bottom: 0;

                // Link styles
                > a {

                    // Hover state
                    &:hover,
                    &:focus {
                        background-color: @nav-tabs-solid-hover-bg;
                    }
                }
            }

            // Style dropdown link
            > .open:not(.active) > a {
                background-color: @nav-tabs-solid-hover-bg;
                border-color: transparent;
            }
        }
    }


    // Tabs with top icon
    &.nav-tabs-icon {
        > li > a > i {
            margin-right: @element-horizontal-spacing;
        }

        // Desktop view
        @media (min-width: @screen-sm-min) {

            // Links
            > li > a {
                padding-bottom: (@line-height-computed - (@padding-base-vertical * 1.5));

                // Icon
                > i {
                    display: block;
                    margin: 5px 0;
                }
            }

            // Sizes
            &.nav-lg > li > a {
                padding-bottom: (@line-height-computed-large - (@padding-base-vertical * 1.5));
            }
            &.nav-sm > li > a {
                padding-bottom: (@line-height-computed-small - (@padding-base-vertical * 1.5));
            }
            &.nav-xs > li > a {
                padding-bottom: (@line-height-computed-mini - (@padding-base-vertical * 1.5));
            }
        }
    }


    // Setup desktop view
    @media (min-width: @screen-sm-min) {
        font-size: 0;

        > li {
            display: inline-block;
            font-size: @font-size-base;
        }
    }


    // Setup mobile view
    @media (max-width: @screen-xs-max) {
        border-bottom: 0;
        position: relative;
        background-color: #fff;
        padding: @list-spacing 0;
        border: 1px solid @panel-default-border;
        border-radius: @border-radius-base;

        // Tab nav item
        > li {
            margin-bottom: 0;

            // Add permanent link styles
            > a {
                border: 0;

                // Hover state
                &:hover,
                &:focus {
                    background-color: @nav-tabs-mobile-link-hover-bg;
                }

                // Stick right elements to the right side
                .position-right {
                    &[class*=icon-] {
                        float: right;
                        margin-top: ((@line-height-computed - @icon-font-size) / 2);
                    }

                    // Labels/badges
                    &.label,
                    &.badge {
                        float: right;
                    }
                }
            }

            // Left border and bg colors for active link
            &.active > a {
                &,
                &:hover,
                &:focus {
                    border: 0;
                    background-color: @nav-tabs-mobile-link-active-bg;

                    // Highlight
                    &:after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: -1px;
                        bottom: 0;
                        width: 2px;
                        background-color: @brand-primary;
                    }
                }
            }

            // Dublicate left border for dropdown link
            &.open:not(.active) > a {
                &,
                &:hover,
                &:focus {
                    background-color: @nav-tabs-mobile-link-hover-bg;
                }
            }

            // Make all left aligned
            &.pull-right {
                float: none!important;
            }
        }

        // Remove highlight in solid and colored tabs
        &.nav-tabs-solid,
        &[class*=bg-] {
            > li.active > a {
                &:after {
                    content: none;
                }
            }
        }

        // Add text header to the tabs section
        &:before {
            content: 'Contents';
            color: inherit;
            font-size: @font-size-small;
            line-height: @line-height-small;
            margin-top: (@content-padding-base - @list-spacing);
            margin-left: @content-padding-base;
            margin-bottom: @content-padding-base;
            text-transform: uppercase;
            .opacity(0.5);
        }

        // Tabs with solid background
        &[class*=bg-] {
            > li {
                > a:hover,
                > a:focus,
                &.open:not(.active) > a {
                    background-color: fade(#000, 5%);
                }
            }
        }

        // Vertical tabs
        .nav-tabs-right & {
            margin-bottom: 0;
            margin-top: @line-height-computed;
        }
    }
}



// Vertical tabs
// -------------------------

@media (min-width: @screen-sm-min) {

    // Base
    .nav-tabs-vertical {
        display: table;
        width: 100%;

        // Tabs base
        > .nav-tabs {
            display: table-cell;
            border-bottom: 0;
            width: 300px;

            // Tabs nav item
            > li {
                display: block;
                margin-bottom: 0;
            }
        }

        // Solid and custom colored tabs
        > .nav-tabs-solid > li:last-child > a:after {
            .border-bottom-radius(@border-radius-base);
        }
        > .nav-tabs[class*=bg-] {
            > li:first-child > a {
                .border-top-radius(@border-radius-base);
            }

            > li:last-child > a {
                .border-bottom-radius(@border-radius-base);
            }
        }

        // Tab content
        > .tab-content {
            display: table-cell;

            // With padding
            > .has-padding {
                padding: 0;
                padding-top: (@padding-base-vertical * 1.5);
            }
        }

        // Bordered tab content
        &.tab-content-bordered > .tab-content {
            border-top-width: 1px;
        }
    }

    // Left tabs
    .nav-tabs-left {

        // Basic tabs
        > .nav-tabs {
            border-right: 1px solid @nav-tabs-border-color;

            // Items
            > li {
                margin-right: -1px;

                // Active links
                &.active > a,
                &.active > a:hover,
                &.active > a:focus {
                    border-bottom-color: @nav-tabs-border-color;
                    border-right-color: transparent;
                }
            }

            // Tabs component
            &.nav-tabs-component > li > a {
                border-radius: @border-radius-base 0 0 @border-radius-base;
            }
        }

        // Highlighted tabs
        > .nav-tabs-highlight {
            > li > a {
                &,
                &:hover,
                &:focus {
                    border-top-width: 1px;
                    border-left-width: 2px;
                }
            }

            // Active tabs item
            > li.active > a,
            > li.active > a:hover,
            > li.active > a:focus {
                border-top-color: @nav-tabs-border-color;
                border-left-color: @color-pink-400;
            }
        }

        // With top border
        > .nav-tabs-top,
        > .nav-tabs-bottom {
            padding-right: @grid-gutter-width;
        }

        // Divided tabs
        > .top-divided,
        > .bottom-divided {
            padding-right: 0;
            border-right-width: 0;
        }

        // Solid and custom colored tabs
        > .nav-tabs-solid,
        > .nav-tabs[class*=bg-] {
            border-right: 0;
            border-radius: @border-radius-base;

            > li {
                margin-right: 0;
            }
        }

        // Tab content
        > .tab-content {
            padding-left: @grid-gutter-width;
        }

        // Bordered tab content
        &.tab-content-bordered > .tab-content {
            border-left-width: 0;
        }
    }

    // Right tabs
    .nav-tabs-right {

        // Basic tabs
        > .nav-tabs {
            border-left: 1px solid @nav-tabs-border-color;
            margin-bottom: 0;
            margin-top: @line-height-computed;

            // Nav items
            > li {
                margin-left: -1px;

                // Active tab
                &.active > a,
                &.active > a:hover,
                &.active > a:focus {
                    border-bottom-color: @nav-tabs-border-color;
                    border-left-color: transparent;
                }
            }

            // Tabs component
            &.nav-tabs-component > li > a {
                border-radius: 0 @border-radius-base @border-radius-base 0;
            }
        }

        // Highlighted tabs
        > .nav-tabs-highlight {
            > li > a {
                &,
                &:hover,
                &:focus {
                    border-top-width: 1px;
                    border-right-width: 2px;
                }
            }

            // Active tabs
            > li.active > a,
            > li.active > a:hover,
            > li.active > a:focus {
                border-top-color: @nav-tabs-border-color;
                border-right-color: @color-pink-400;
            }
        }

        // With top border
        > .nav-tabs-top,
        > .nav-tabs-bottom {
            padding-left: @grid-gutter-width;
        }

        // Divided tabs
        > .top-divided,
        > .bottom-divided {
            padding-left: 0;
            border-left-width: 0;
        }

        // Solid and custom colored tabs
        > .nav-tabs-solid,
        > .nav-tabs[class*=bg-] {
            border-left: 0;
            border-radius: @border-radius-base;

            > li {
                margin-left: 0;
            }
        }

        // Tab content
        > .tab-content {
            padding-right: @grid-gutter-width;
        }

        // Bordered tab content
        &.tab-content-bordered > .tab-content {
            border-right-width: 0;
        }
    }
}



// Pills
// -------------------------

// Base
.nav-pills {
    margin-bottom: @line-height-computed;

    // Pill item
    > li {
        float: none;

        // Links rendered as pills
        > a {
            color: @gray-dark;
        }

        // Inline links
        & + li {
            margin-left: 0;

            // Add top spacing on mobile
            > a {
                margin-top: 2px;
            }
        }
    }

    // Link if dropdown opened
    .open > a {
        &,
        &:hover,
        &:focus {
            background-color: @nav-link-hover-bg;
        }
    }

    // Bordered and toolbar pills
    &.nav-pills-bordered,
    &.nav-pills-toolbar {
        > li > a,
        > .open > a {
            border: 1px solid @nav-tabs-border-color;
        }

        // Active state
        > .active > a,
        > .active > a:hover,
        > .active > a:focus {
            border-color: @nav-pills-active-link-hover-bg;
        }
    }

    // Toolbar pills
    &.nav-pills-toolbar {
        @media (min-width: @screen-sm-min) {
            > li {
                > a {
                    border: 1px solid @nav-tabs-border-color;
                    border-radius: 0;
                }

                &:first-child > a {
                    border-radius: @border-radius-base 0 0 @border-radius-base;
                }

                &:last-child > a {
                    border-radius: 0 @border-radius-base @border-radius-base 0;
                }

                & + li > a {
                    margin-top: 0;
                    margin-left: 0;
                    border-left: 0;
                }
            }
        }
    }


    // Setup desktop view
    @media (min-width: @screen-sm-min) {
        font-size: 0;

        // Pill item
        > li {
            display: inline-block;
            font-size: @font-size-base;

            // Links
            + li > a {
                margin-top: 0;
                margin-left: @tags-spacing;
            }
        }

        // Justified pills
        &.nav-justified {
            > li {
                display: table-cell;
            }
        }
    }

    // Stick right elements to the right side
    @media (max-width: @screen-xs-max) {
        > li > a {
            .position-right {

                // Icons
                &[class*=icon-] {
                    float: right;
                    margin-top: ((@line-height-computed - @icon-font-size) / 2);
                }

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

// Stacked pills
.nav-stacked {
    > li {
        display: block;

        // Links
        > a {
            .pull-right {
                &[class*=icon-] {
                    float: right;
                    margin-top: ((@line-height-computed - @icon-font-size) / 2);
                }

                // Labels/badges
                &.label,
                &.badge {
                    float: right;
                }
            }
        }

        // Sibling links
        + li > a {
            margin-left: 0;
        }
    }
}


// Nav variations
// -------------------------

// Justified nav links
.nav-justified {

    // Remove bottom margin
    > li > a {
        margin-bottom: 0;
    }
}

// Justified tabs
.nav-tabs-justified {

    // Links
    > li > a {
        border-radius: 0;
        margin-bottom: 0;
        
        // Hover state
        &:hover,
        &:focus {
            border-bottom-color: @nav-tabs-border-color;
        }
    }

    // Setup desktop view
    @media (min-width: @screen-sm-min) {

        // Justified tabs with top border only
        &.nav-tabs-top {
            border-bottom: 1px solid @nav-tabs-border-color;

            // Links
            > li > a,
            > li > a:hover,
            > li > a:focus {
                border: 0;
            }
        }

        // Justified tabs with bottom border only
        &.nav-tabs-bottom {
            border-bottom: 1px solid @nav-tabs-border-color;
        }

        // Justified tabs with highlighted top border
        &.nav-tabs-highlight {
            > li > a,
            > li > a:hover,
            > li > a:focus {
                border-top-width: 2px;
            }
        }
    }

    // Setup mobile view
    @media (max-width: @screen-xs-max) {
        border-bottom: 1px solid @panel-default-border;

        // Give them the same look
        > li {
            &.active > a {
                &,
                &:hover,
                &:focus {
                    border: 0;
                }
            }
        }
    }
}

// Add rounded corners to the tabs
@media (min-width: @screen-sm-min) {

    // Default tabs
    .nav-tabs.nav-tabs-component {
        > li > a {
            border-radius: @border-radius-base @border-radius-base 0 0;
        }

        // Solid and with custom color
        &.nav-tabs-solid,
        &[class*=bg-] {
            border-radius: @border-radius-base;

            // Links
            > li > a {
                border-radius: 0;
            }

            // Link in first item
            > li:first-child > a {
                border-radius: @border-radius-base 0 0 @border-radius-base;
            }
        }
    }

    // Justified tabs
    .nav-tabs-component.nav-justified:extend(.nav-tabs-component) {
        &.nav-tabs-solid,
        &[class*=bg-] {
            > li:last-child > a {
                border-radius: 0 @border-radius-base @border-radius-base 0;
            }
        }
    }
}



// Tab content area
// -------------------------

// Add padding as panes don't have it by default
.tab-content > .has-padding {

    // Bordered tab content
    .tab-content-bordered & {
        padding: @panel-body-padding;
    }

    // Inside flat panel
    .panel-flat > .panel-heading + & {
        padding-top: 0;
    }

    // Remove padding on mobiles
    @media (min-width: @screen-sm-min) {
        padding: @panel-body-padding;
    }
}

// Panel tab content
.panel-tab-content {
    > .has-padding {
        padding: @panel-body-padding;
    } 
}

// Bordered tab content
.tab-content-bordered {

    // Add padding and borders to tab content area
    .tab-content {
        border-radius: @border-radius-base;
        border: 1px solid transparent;

        &:not([class*=bg-]) {
            border-color: @nav-tabs-active-link-hover-border-color;
            background-color: @nav-tabs-active-link-hover-bg;
        }

        @media (min-width: @screen-sm-min) {
            border-top-width: 0;
            border-radius: 0 0 @border-radius-base @border-radius-base;
        }
    }

    // Setup desktop view
    @media (min-width: @screen-sm-min) {
        .nav-tabs {
            margin-bottom: 0;

            // Add specific styles for solid tabs
            &.nav-tabs-solid {
                border-radius: @border-radius-base @border-radius-base 0 0;
                .box-shadow (0 0 0 1px @nav-tabs-border-color inset);

                > li:first-child > a {
                    border-radius: @border-radius-base 0 0 0;
                }

                &.nav-justified > li:last-child > a {
                    border-radius: 0 @border-radius-base 0 0;
                }
            }
        }

        // Tabs with solid color
        > .nav-tabs[class*=bg-] {
            .border-top-radius(@border-radius-base);

            & + .tab-content[class*=bg-] {
                border-top-width: 1px;
                border-top-color: fade(#fff, 50%);
            }
        }
    }
}



// Responsive stuff
// -------------------------

// Setup desktop view
@media (min-width: @screen-sm-min) {

    // Dropdown top margin correction in some tabs layouts
    .nav-tabs[class*=bg-],
    .nav-tabs-top {
        .dropdown-menu {
            margin-top: 0;
        }
    }

    // Top 1px gap for dropdown in bottom divided layout
    .nav-justified.bottom-divided .dropdown-menu {
        margin-top: 1px;
    }
}


// Setup mobile view
@media (max-width: @screen-xs-max) {
    .nav-tabs,
    .nav-pills {

        // Make dropdown full width on mobile
        .dropdown-menu,
        &.nav-justified > .dropdown .dropdown-menu {
            left: -1px;
            right: -1px;
            margin-top: 2px;
        }

        // Always use left text alignment on mobile
        &.nav-justified,
        &.text-center,
        &.text-right {
            > li > a {
                text-align: left;
            }
        }
    }
}