Icon boxes not perfectly square when combined with "is-hidden-mobile"

[leolivier]

This is about Bulma | the Docs.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [1.0.1]
My browser is: Firefox or Edge with the same result
I think this issue is not a duplicate

Description

Using this piece of HTML:

<a class="button is-pulled-right" href="/pages-edit/create" title="Create a Page">
  <span class="is-large icon">
    <i class="mdi mdi-24px mdi-book-open-page-variant-outline" aria-hidden="true"></i>
  </span>
  <span class="is-hidden-mobile">Create a Page</span>
</a>

If you run that on mobile, then the icon is not perfectly square, nor centered there is a white place on the right handside of the icon:

Then is-hidden-mobile part is hidden but it looks like there is a "gap" between the icon and this part...

[leolivier]

I think this is linked to
.button .icon:first-child:not(:last-child) {
margin-inline-end: calc(var(--bulma-button-padding-horizontal).25);
margin-inline-start: calc(var(--bulma-button-padding-horizontal)-.5);
}
and
.button {
--bulma-button-padding-vertical: 0.5em;
--bulma-button-padding-horizontal: 1em;
}

the "is-hidden-mobile" child is counted even if it is hidden on mobile so the first set of rules is executed
and if you change
.button {
--bulma-button-padding-vertical: 0.5em;
--bulma-button-padding-horizontal: 0.5em;
}
then everything is properly square.
Now, I don't know how to fix this in a generic way.
We should maybe change the selector like this:
.button:has(> :last-child:not(.is-hidden-mobile)) .icon:first-child:not(:last-child)
but not sure it covers all cases
EDIT: fixed selector

[leolivier]

I think I fixed it like this:
.button .icon {
margin-inline-end: calc(var(--bulma-button-padding-horizontal)-.5) !important;
margin-inline-start: calc(var(--bulma-button-padding-horizontal)-.5) !important;
}
.button:has(> :last-child:not(.is-hidden-mobile)) .icon:first-child:not(:last-child) {
margin-inline-end: calc(var(--bulma-button-padding-horizontal).25) !important;
margin-inline-start: calc(var(--bulma-button-padding-horizontal)-.5) !important;
}