Can you move all `&` selectors above child/descendant selectors? It is easier to see what is happening to the element.

In general the CCAP folks use something like

    [SELECTOR] {
      [RULES]
      [&.classnames]
      [&::PSEUDOSELECTORS]
      [> CHILDREN]
      [DESCENDANTS]
    }