.selector {
  @media (hover: hover) {
    &:hover {
      background-color: var(--wds-selector-list-item-fill-hover, var(--wds-color-black-700));
    }
  }

  /* doubled root class mirrors the base sheet: outranks `:hover` */
  &#{&}--is-active {
    background-color: var(--wds-selector-list-item-fill-focus, var(--wds-color-black-700));
  }

  @media (hover: hover) {
    &:hover:active {
      background-color: var(--wds-selector-list-item-fill-active, var(--wds-color-black-600));
    }
  }
}