checkbox color becomes darker when hovering over it

I have changed the color of my checkboxes when they are checked to not be the default light blue using the following CSS:

  input[type="checkbox"] {
  accent-color: var(--red);
  }

the problem is that when I hover over the checkbox it makes the color darker. I tried using the :hover pseudo-selector which somewhat works as it will change the color to whatever you set it to, but still takes it and makes it darker. Does anyone know how to keep it from doing this?