How to address more states and variants at once?

.component.variantThe selector you want to insert .elementThe element you want to style:hoverThe selector you want to insert

SASS

+component('.btn')
  +register
    +variant('.primary')
    +element('.icon')
      +state(':hover')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +variant('.primary')
      +default
        background-color: red

      +state(':hover')
        background-color: orange

CSS

.btn {
  display: inline-flex;
}

.btn .icon {
  background-color: grey;
}

.btn.primary .icon {
  background-color: red;
}

.btn.primary .icon:hover {
  background-color: orange;
}

More info: +variant, +default, +pseudo-element, +element, +register, +component, separator +___