How to declare a element selector variant on sub-element?

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

Option 1

SASS

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

  display: inline-block

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

    +variant('button')
      cursor: pointer

CSS

.btn {
  display: inline-block;
}

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

.btn button.btn-inner {
  cursor: pointer;
}

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')

  display: inline-block

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

    +variant('{clickable}')
      cursor: pointer

CSS

.btn {
  display: inline-block;
}

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

.btn a.btn-inner, .btn button.btn-inner, .btn input.btn-inner {
  cursor: pointer;
}

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