how to modify built-in classes with Vuejs-CodePudding

this is a built-in class in vue-awesome-swiper

.swiper-button-next {
   position: absolute;
   right: 46%
}

I need to change this CSS code only in right-to-left direction to be like this

.swiper-button-next {
   position: absolute;
   left: 46%
}

so I have to put a condition , how can I conditionally modify this CSS code

NOTE :- I know the condition but I don't know how to apply it

CodePudding user response：

You could use the following rule by assuming the dir="rtl" attribute is assigned to body element:

body[dir="rtl"] .swiper-button-next {
   left:auto;
   right: 46%;
}