Firefox hover seems to ignore visited

Question

When I use the hover and visited properties on a styled component it seems to conflict.

https://codesandbox.io/s/heuristic-volhard-n03ik?file=/src/styles.css:0-326

.button:visited {
  background-color: green;
}

.button:visited:hover {
  background-color: red;
}

.button:hover {
  background-color: blue;
}

.button {
  background-color: black;
  padding: 10px;
  text-decoration: none;
  transition: background-color 0.5s ease;
}

What I am trying to archive here is having 2 states:

• not visited: black hover directly to blue
• visited: green hover directly to red

But in Firefox it seems to ignore the visited state on hover and go from green to blue to red. (In chrome it seems to work perfectly)

Does anyone has experience with this and know how to fix it?