.nav-tabs {
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid $tablulator--border-color;
    @include user-select(none);

    li {
        display: inline-block;
        border-bottom: 2px solid transparent;
        margin: 0 1rem -1px;
        @include user-select(none);
        transition: all .2s ease-in;

        a {
            display: inline-block;
            font-size: 1rem;
            line-height: 1.6;
            padding: 0.6rem 1rem;
            color: $tablulator--border-color;
            @include user-select(none);
            transition: all .2s ease-in;

            &:hover {
                text-decoration: none;
            }
        }

        &:hover {
            border-color: $tablulator--color;

            a {
                color: $tablulator--color;
            }
        }

        &.active, &.active:hover {
            border-color: $a--link;

            a {
                color: $a--link;
            }
        }
    }

    &--top {
        @extend .nav-tabs;
        border-bottom: none;
        border-top: 1px solid $tablulator--border-color;

        li {
            border-bottom: none;
            border-top: 2px solid transparent;
        }
    }
}

.nav-subtabs {
    @extend .nav-tabs;
    border: none;

    &--top {
        @extend .nav-subtabs;

        li {
            border-bottom: none;
            border-top: 1px solid transparent;
        }
    }
}