Checkboxes have a slightly different position in Firefox

Here's the Codepen link: https://codepen.io/karlomajer/pen/pLajad

My problem is that when you add some todos, in Chrome you can see that the checkboxes are properly aligned with the toggle all button (the ❯ symbol rotated by 90 degrees) but in Firefox they aren't and you can clearly see that the checkbox in Firefox isn't properly centered inside it's grid cell while in Chrome it is.

I noticed that <div class="pretty p-icon p-round"> (the checkbox) is 22.5 x 20 in Chrome but 30 x 20 in Firefox.

My todos are stored inside ul as a div (I wasn't thinking clearly while forming them and I will re do it properly later).

I'm using pretty-checkbox to make my checkboxes.

Todos:

ul > div {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  border-bottom: 1px solid #ededed;
  align-items: center;
}

Checkbox styling:

ul > div > div {
  justify-self: center;
  transform: scale(1.25);
}

I had to set the margins of .pretty to 0 because by default it has a margin-right of 1em:

.pretty {
  margin: 0;
}

Here's the checkbox structure for pretty-checkbox that I'm using:

<div class="pretty p-icon p-round">
  <input type="checkbox" class="checkbox">
  <div class="state">
    <i class="icon mdi mdi-check"></i>
    <label></label>
  </div>
</div>