// allows button tags as nav toggle
.nav {
    padding-left: 0; // Override default ul/ol
    margin-bottom: 0;
    list-style: none;
    &:extend(.clearfix all);

    > li {
        position: relative;
        display: block;
        padding-left: 0; // Override default ul/ol
        margin-bottom: 0;
        list-style: none;
        &:extend(.clearfix all);

        > a,
        > button,
        > .dropdown > button {
            position: relative;
            display: block;
            padding: @nav-link-padding;
            &:hover,
            &:focus {
                text-decoration: none;
                background-color: @nav-link-hover-bg;
            }
        }

        // Disabled state sets text to gray and nukes hover/tab effects
        &.disabled > a,
        &.disabled > button,
        &.disabled > .dropdown > button {
            color: @nav-disabled-link-color;

            &:hover,
            &:focus {
                color: @nav-disabled-link-hover-color;
                text-decoration: none;
                cursor: @cursor-disabled;
                background-color: transparent;
            }
        }
    }

    // Open dropdowns
    .open > a,
    .open > button {
        &,
        &:hover,
        &:focus,
        &:active {
            box-shadow: none;
            background-color: @nav-link-hover-bg;
            border-color: @link-color;
        }
    }

    > li > .active,
    > .active > a,
    > .active > button,
    > .active > .dropdown > button {
        outline: none;
    }
}


// Give the tabs something to sit on
.nav-tabs {
    border-bottom: 1px solid @nav-tabs-border-color;
    > li {
        float: left;
        // Make the list-items overlay the bottom border
        margin-bottom: -1px;

        // Actual tabs (as links)
        > a,
        > button,
        > .dropdown > button {
            color: @nav-tabs-link-color;
            margin-right: @nav-spacing;
            border-radius: @nav-tabs-border-radius; // make border radius configurable
            line-height: @line-height-base;
            border: 1px solid transparent;
            &:hover {
                border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
            }
        }

        // Active state, and its :hover to override normal :hover
        > .active,
        &.active > a,
        &.active > button,
        &.active > .dropdown > button {
            &,
            &:hover,
            &:focus {
                color: @nav-tabs-active-link-hover-color;
                cursor: default;
                background-color: @nav-tabs-active-link-hover-bg;
                border: 1px solid @nav-tabs-active-link-hover-border-color;
                border-bottom-color: transparent;
            }
        }
    }

    // Specific dropdowns
    .dropdown-menu {
        // make dropdown border overlap tab border
        margin-top: -1px;
        // Remove the top rounded corners here since there is a hard edge above the menu
        .border-top-radius(0);
    }
}

// lateral nav like in the profile
.lateral-nav {
    padding: 0;
    margin-bottom: @component-margin-bottom;
    display: flex;
    flex-direction: column;

    .lateral-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        text-align: left;
        padding: 10px 15px;
        border: 1px solid transparent;
        color: @text-color;
        background: @gray-lighter;
        text-decoration: none;
        border-radius: @border-radius-base;

        &.active {
            background: @summary-bg;
            color: @summary-link-active-color;
            padding-right: 30px;
            margin-right: floor(-@grid-gutter-width / 2);
            border-top-right-radius: @grid-gutter-width;
            border-bottom-right-radius: @grid-gutter-width;

            .box-shadow(@summary-box-shadow);
        }

        + .lateral-link {
            margin-top: 5px;
        }

        .lateral-nav-actions {
            margin-left: auto;
            > .btn {
                padding: 0;
            }
        }
    }
}

// Tabbable tabs
// used by react-bootstrap Tabs (which shouldn't be used).
// -------------------------

// Hide tabbable panes to start, show them when `.active`
.tab-content {
    > .tab-pane {
        display: none;
    }
    > .active {
        display: block;
    }
}
