How to declare a state on component root element?

.componentThe element you want to style:hoverThe selector you want to insert

SASS

+component('.btn')
  +register
    +state(':hover')

  +default
    display: inline-flex
    background-color: grey

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

CSS

.btn {
  display: inline-flex;
  background-color: grey;
}

.btn:hover {
  background-color: red;
}

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