<label class="field -inline" for="checkbox-default">
  <input class="checkbox" type="checkbox" id="checkbox-default">
  Checkbox
</label>

<label class="field -inline" for="checkbox-checked">
  <input class="checkbox" type="checkbox" checked id="checkbox-checked">
  Checked
</label>

<label class="field -inline" for="checkbox-disabled">
  <input class="checkbox" type="checkbox" disabled id="checkbox-disabled">
  Disabled
</label>

<label class="field -inline" for="checkbox-checked-disabled">
  <input class="checkbox" type="checkbox" checked disabled id="checkbox-checked-disabled">
  Checked Disabled
</label>

:where(input[type=checkbox]),
.checkbox {
  appearance: none;
  background: var(--color-gray-50);
  border-radius: 5px;
  border: 2px solid var(--color-gray-500);
  display: inline grid;
  height: 1.5em;
  transition: background var(--root-ease-out-fast), border-color var(--root-ease-out-fast);
  width: 1.5em;

  &::before {
    content: '';
    background: var(--accent-color-contrast);
    /* Using mask as this is the only way to make the color of the checkmark dynamic */
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 8L9.75 16.25L6 12.5' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    display: none;
  }

  &:hover {
    border-color: var(--accent-color-700);

    &:not(.-disabled, :disabled) {
      &::before {
        display: block;
        background: var(--color-gray-200);
      }
    }
  }

  &.-checked,
  &:checked {
    background: var(--accent-color);
    border-color: var(--accent-color);

    &::before {
      display: block;
    }

    &:hover {
      background: var(--accent-color-600);
      border-color: var(--accent-color-600);
    }
  }

  &.-disabled,
  &:disabled {
    background: var(--color-gray-50);
    border-color: var(--color-gray-200);
    // cursor: not-allowed;

    &::before {
      background-color: var(--color-gray-200);
    }

    &:hover {
      border-color: var(--color-gray-200);
      background: var(--color-gray-50);
    }
  }
}