PrimeVue Accordion hover is completely white

I'm working on a Vue project using Prime Vue for the ui elements. I have an Accordion panel that works great, except when I hover over the header instead of highlighting the whole title bar goes white. I tried digging into the css and here's what I found.

This is the css that is picked up before hover and it seems to be working fine.

.p-accordion .p-accordion-header .p-accordion-header-link {
  padding: 1.25rem;
  border: 0 none;
  color: rgba(255, 255, 255, 0.87);
  background: #1e1e1e;
  font-weight: 400;
  border-radius: 4px;
  transition: none;
}

But when I hover it picks up this

.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
  background: rgba(255, 255, 255, 0.04);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.87);
}

In Firefox dev tools when I disable the background attribute it goes back to the non-hovered color.

I'm curious if this is a problem in core PrimeFaces or if I'm missing a config or something.