outline on focus-visible is not even?

So in my styles i have btn:hover and i add an outline. the first screenshot with the uneven outline is coming from my styles when i hover. but when i tab to the button, its an even outline. same if i change the outline to a border property. why is my outline/border so wonky and uneven? but in its :focus/:focus-visible state its fine?

https://codepen.io/Miss-Fox/pen/bGPbVrJ
Screenshot_2024-07-03_215332.png
Screenshot_2024-07-03_215342.png
Was this page helpful?