How to address variant with the same name on higher parent element?

.component .parent-element.activeThe selector you want to insert .elementThe element you want to style.activeThe same variant is registered on
current element

SASS

+component('article')
  +register
    +element('.header')
      +variant('.active')
      +element('.collapse')
        +variant('.active')
      

  display: inline-flex

  +________________________
  +element('.header')
    position: relative

    +________________________
    +element('.collapse')
      +default
        background: grey

      +variant('.active', -1)
        background: red

CSS

article {
  display: inline-flex;
}

article .header {
  position: relative;
}

article .header .collapse {
  background: grey;
}

article .header.active .collapse {
  background: red;
}

More info: +state, +default, +element, +register, +component, separator +___

More complex use cases

SASS

+component('article')
  +register
    +variant('.active')
    +variant('.special')
    +element('.header')
      +variant('.active')
      +variant('.special')
      +element('.collapse')
        +variant('.active')
        +variant('.special')

  display: inline-flex

  +________________________
  +element('.header')
    position: relative

    +________________________
    +element('.collapse')
      +default
        background: grey

      +variant('.active', 0) // same as +variant('.active')
        background: blue

      +variant('.active', -1)
        background: red

      +variant('.active', -2)
        background: green

      +variant('.special', 1)
        background: magenta

      +variant('.special', 2)
        background: cyan

      +variant('.special', 0) // same as +variant('.special')
        background: yellow

CSS

article {
  display: inline-flex;
}

article .header {
  position: relative;
}

article .header .collapse {
  background: grey;
}

article .header .collapse.active {
  background: blue;
}
article .header.active .collapse {
  background: red;
}
article.active .header .collapse {
  background: green;
}
article.special .header .collapse {
  background: magenta;
}
article .header.special .collapse {
  background: cyan;
}
article .header .collapse.special {
  background: yellow;
}

More info: +state, +default, +element, +register, +component, separator +___