Spinner not fully visible in the <code> element

[MiroslavPetrik]

Describe the issue

Using aria-busy with <code> element cuts the circle-spinner as square in bottom-right corner.

Current Behavior

Spinner is cut partially into square

Expected Behavior

Spinner should be fully visible as circle

Reproduction URL

https://codesandbox.io/p/sandbox/picocss-spinner-in-code-3y979t

Environment

W11 & latest Chrome & Firefox

[FireIsGood]

This seems to be caused by the fact that the spinner has its width and height set as 1rem while the background size is set as 1rem

This is an issue because when the font size is changed, the spinner will resize its content box but not the actual background image of the spinner. The <code> element is affected since it modifies the font-size to be 0.875em.

---

One solution would be to change the background-size property from 1rem auto to `1em auto:

If this seems correct, I can make a pull request to fix it or it could be simply changed within pico/scss/components/_loading.scss line 18 and rebuilt.