How to declare a element selector variant on parent element?

.component buttonThe selector you want to insert.parent-element .elementThe element you want to style

Option 1

SASS

+component('.btn')
  +register
    +element('.btn-inner')
      +variant('button')
      +element('> .icon')

  display: inline-block

  +________________________
  +element('.btn-inner')
    display: inline-flex

    +________________________
    +element('> .icon')
      +default
        background: grey

      +variant('button')
        background: red

CSS

.btn {
  display: inline-block;
}

.btn .btn-inner {
  display: inline-flex;
}

.btn .btn-inner > .icon {
  background: grey;
}

.btn button.btn-inner > .icon {
  background: red;
}

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

Option 2 - via alias and multiple elements

SASS

+component('.btn')
  +register
    +element('.btn-inner')
      +variant('{clickable}', 'a', 'button', 'input')
      +element('> .icon')

  display: inline-block

  +________________________
  +element('.btn-inner')
    display: inline-flex

    +________________________
    +element('> .icon')
      +default
        background: grey

      +variant('{clickable}')
        background: red

CSS

.btn {
  display: inline-block;
}

.btn .btn-inner {
  display: inline-flex;
}

.btn .btn-inner > .icon {
  background: grey;
}

.btn a.btn-inner > .icon, .btn button.btn-inner > .icon, .btn input.btn-inner > .icon {
  background: red;
}

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