Tengo mi componente de entrada Vue . Este componente tiene tales estilos:

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

Como puede ver, tiene una sombra de cuadro al pasar el mouse y un borde al enfocar. Aquí está el problema, si tengo el foco y el cursor al mismo tiempo, tengo la sombra y el borde del cuadro.

Quiero que funcione así: si se desplaza o se enfoca, tiene que ser como es, pero si se enfoca y se desplaza al mismo tiempo, quiero usar solo el borde. Estaba tratando de hacer esto así, pero no funciona:

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