I have my Vue input component. This component has such styles:

.basic-input:hover { box-shadow: 0 0 5px $maincolor; }
.basic-input:focus { border: 0.5px solid $maincolor; }

As you can see it has box shadow on hover and border on focus. Here is the problem, if I have focus and hover at the same time, I has box shadow and border.

I want to make it work like this - if it's hover or focus, it has to be like it is, but If it has focus and hover at the same time, I want to use only border. I was trying to do this like that, but it doesn't work:

.basic-input:focus .basic-input:hover { border: 0.5px solid $maincolor; }