/* ----------------------------------------------------------------------------
    Navs
---------------------------------------------------------------------------- */


.nav-tabs {
    margin-bottom: 20px;
    display: inline-block;
    border: 1px solid @gray-lighter;

    & > li {
        & > a {
            .border-radius(0);
            .box-shadow(none);
            .transition(~"color 0.25s ease, background 0.25s ease");

            margin-right: 0;
            padding: 20px 40px;
            font-family: @font-family-heading;
            font-size: @font-size-small - 1px;
            text-transform: uppercase;
            font-weight: @normal-weight;
            color: @text-gray;
            background-color: @white-alt;
            border-style: solid;
            border-width: 0 0 0 1px;
            border-color: transparent transparent transparent @gray-lighter;

            &:hover,
            &:active,
            &:focus {
                &:extend(.base-clr-bg);

                color: @text-white;
            }
        }

        &:first-child > a {
            border-left-color: transparent;
        }

        &.active a {
            border-width: 0 0 0 1px;
            border-color: transparent transparent transparent @white;

            &:hover,
            &:active,
            &:focus {
                border-width: 0 0 0 1px;
                border-color: transparent transparent transparent @white;
            }
        }

        &.active + li a {
            border-left-color: transparent;
        }
    }

    &.alt {
        .border-radius(3px);

        margin-bottom: 50px;
        display: inline-block;

        & > li {
            margin-bottom: 0;

            &:first-child > a {
                border-left-color: transparent;
            }

            & > a {
                padding: 20px 60px;
                background-color: transparent;
                border-left: 1px solid @gray-lighter;

                &:hover,
                &:active,
                &:focus {
                    &:extend(.base-clr-bg);

                    color: @text-white;
                }
            }

            &.active a {
                &:extend(.base-clr-bg);

                .box-shadow(none);

                padding: 20px 60px;
                color: @text-white;
                border-width: 0 0 0 1px;
                border-left-color: transparent;
            }
        }
    }
}

.tab-content {
    margin-top: -7px;

    &.tab-pane {
        padding: 16px 30px;
        border: 1px solid @gray-lighter;
    }

    &.alt .tab-pane {
        padding: 0;
        text-align: left;
        border: none;

        .btn {
            margin-top: 15px;
        }
    }
}



@media (max-width: @screen-md-max) {
    .alt.tab-content .tab-pane {
        padding-bottom: 25px;

        // .btn {
        //     margin-top: -15px;
        //     margin-right: 15px;
        // }
    }
}

@media (max-width: @screen-md-max) {
    .alt.tab-content .tab-pane {
        padding-bottom: 20px;
    }
}

@media (max-width: @screen-xs-max) {
    .nav-tabs .btn {
        margin: 0 10px 25px 0;
    }

    .nav-tabs,
    .alt.nav-tabs {
        width: 100%;

        & > li {
            float: none;

            & > a {
                display: block;
                padding: 20px 36px;
            }
        }
    }
}

@media (max-width: @screen-xs-min) {
    .alt.tab-content .tab-pane {
        padding-bottom: 15px;

        .btn {
            margin-top: 0;
        }
    }

    .tab-content .btn {
        margin: 0 0 15px;
    }
}

@media (max-width: @screen-2xs) {
    .nav-tabs .btn {
        margin: 0 10px 25px 0;
    }
}