.tab-nav {
    list-style: none;
    padding: 0;
    white-space: nowrap;
    margin: 0 0 20px;
    overflow: auto;
    box-shadow: inset 0 -2px 0 0 rgba(255,255,255,0.1);
    width: 100%;
        
    li {
        display: inline-block;
        vertical-align: top;

        & > a {
            display: block;
            color: @mae-lightest;
            text-transform: uppercase;
            position: relative;
            width: 100%;
            font-weight: 500;

            &, &:after {
                .transition(all);
                .transition-duration(250ms);
            }

            &:after { 
                content: "";
                height: 2px;
                position: absolute;
                width: 100%; 
                left: 0;
                bottom: 0;
                background: @mae-lighter;
                .scale(0);
            }
            
            @media (min-width: @screen-sm-min) {
                padding: 15px;
            }
            
            @media (max-width: @screen-sm-min) {
                padding: 15px 8px;
            }
        }
        
        &.active {
            & > a { 
                color: @mae-lighter;
                
                &:after {
                    .scale(1);
                }
            } 
        }
    }
}

.tab-nav--light {
    li {
        & > a {
            color: #a9bac3;

            &:after {
                background: @mae-darker;
            }

        }

        &.active {
            & > a {
                color: @card-bg;
            }
        }
    }
}

.tab-nav--justified {
    & > li {
        display: table-cell;
        width: 1%;
        text-align: center;
    }
}

.tab-nav--icon {
    & > li {
        .zmdi {
            font-size: 22px;
            line-height: 100%;
            min-height: 25px;
        }
    }
}

.tab-nav--centered {
    text-align: center;
}