//
// Static resources
//
$pivot-horizontal-padding:                                                      12px;
$pivot-hover-color:                                                             rgba($color-type-primary, 0.8);
$pivot-hover-color-alt:                                                         rgba($color-type-primary-alt, 0.8);

//
// Navbar
//
.navbar {
    .nav {
        li {
            margin: 0;
        }
        
        // Open dropdowns
        .open > a {
            &,
            &:hover,
            &:focus {
                border: none;
            }
        }
    }
}

// Need to get real specific to override Bootstrap here, hence descendant child selectors
// Without this .side-navigation gets ugly backgrounds on hover & focus
.nav > li {
    > a:hover,
    > a:focus {
        background-color: transparent;
    }
}

//
// Nav pills
//
.page-header .nav-pills {
    margin: spacing(xs) 0;
    
    li {
        margin: 0;
    }

    > li > a {
        margin: 0 spacing(xs) 0 0;
        padding: spacing(xxs) 0;
        color: $color-type-primary;

        &:hover {
            color: $brand-primary;
            text-decoration: underline;
            background: none;
        }
    }

    > li.active > a,
    > li.active > a:hover,
    > li.active > a:focus {
        background: none;
        color: $brand-primary;
        text-decoration: none;
    }
}

//
// Tabs
// MDL: Pivot control
//
.nav-tabs {
    border-bottom: 0;
    margin-left: -($pivot-horizontal-padding); // Offsetting padding on the individual tabs
    margin-right: -($pivot-horizontal-padding); // Offsetting padding on the individual tabs

    > li {
        margin: 0;

        // Main tabs
        // Resetting most of the Bootstrap styles
        > a {
            @include type(t4);
            border: 0;
            border-radius: 0;
            margin: 0;
            padding-left: $pivot-horizontal-padding;
            padding-right: $pivot-horizontal-padding;

            &:hover,
            &:focus {
                border: 0;
                background: transparent;
            }
        }
        // Active tab
        &.active > a {
            &,
            &:hover,
            &:focus {
                border: 0;
                background: transparent;
            }
        }

    }

    // Default colors
    > li > a {
        color: $color-type-secondary;

        &:hover,
        &:focus {
            color: $pivot-hover-color;
        }
    }
    > li.active > a {
        color: $color-type-primary;

        &:hover,
        &:focus {
            color: $pivot-hover-color;
        }
    }

    // Alt colors
    &.theme-alt {
        > li > a {
            color: $color-type-secondary-alt;

            &:hover,
            &:focus {
                color: $pivot-hover-color-alt;
            }
        }
        > li.active > a {
            color: $color-type-primary-alt;

            &:hover,
            &:focus {
                color: $pivot-hover-color-alt;
            }
        }
    }
}