Generated by SassMeister.com.

input.scss

.selector {
  $this: &;
  &:not(:active),
  &:not(#{$this}--active) {
    &#{$this}_color_hover,
    &:hover {
      background-color: var(--color-element-hover);
    }
  }
}

output.css

.selector:not(:active).selector_color_hover, .selector:not(:active):hover, .selector:not(.selector--active).selector_color_hover, .selector:not(.selector--active):hover {
  background-color: var(--color-element-hover);
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}