Bootstrap vue pagination styling - vue.js

Question

I need some help. I am trying to style bootstrap vue pagination and I am not able to achieve it. The only thing I was able to achieved was to moved the pagination 50% to the left. I can not style the ul, li and the button inside the li such as changing background for ul, li and button, text color and etc. I even use class name on them, but nothing is working.
var app = new Vue({
el: '#app',
data: () => ({
currentPage: 1,
rows: 50
}),
})
.pagination {
margin-left: 50%;
ul {
text-align: right;
li {
float: right !important;
}
}
.page-item {
color: $color-red;
}
.page-link {
color: $color-red;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Required Stylesheets -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"
/>
<!-- Required scripts -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id='app'>
<b-container
class="pagination-container">
<b-pagination
:container-class="'pagination'"
:pageClass="'page-item'"
:pageLinkClass="'page-link-item'"
v-model="currentPage"
pills :total-rows="rows">
</b-pagination>
</b-container>
</div>

Answer 1

compile your sass file, and inspect the elements to get to the selectors
var app = new Vue({
el: '#app',
data: () => ({
currentPage: 1,
rows: 50
}),
})
.pagination {
margin-left: 50%;
}
.pagination ul {
text-align: right;
}
.pagination li {
float: right !important;
}
.pagination .page-item {
color: red;
}
.pagination .page-link {
color: red;
}
.pagination .page-item.active .page-link {
color: #000;
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Required Stylesheets -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"
/>
<!-- Required scripts -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id='app'>
<b-container
class="pagination-container">
<b-pagination
:container-class="'pagination'"
:pageClass="'page-item'"
:pageLinkClass="'page-link-item'"
v-model="currentPage"
pills :total-rows="rows">
</b-pagination>
</b-container>
</div>