Nested selectors: target parent element by style name

[gvocale]

In styled component I can do something like this:

// component.tsx
<Styled.Button>
  <Styled.Indicator />
</Styled.Butotn>

// styles.ts
export const Button = styled.button`
    padding: 8px;
`

export const Indicator = styled.div`
  ${Button} &:hover { 
     background-color: red
  }
`

Can I convert it to something like the following in theme-ui?

// component.tsx
<Box as='button' sx={styles.button}>
  <Box sx={styles.indicator} />
</Box>

// styles.tsx
export const button: SxStyleProp = {
    p: 2,
}

export const indicator: SxStyleProp = {
  ${styles.button} &:hover { // not working
    backgroundColor: 'red'
  }
}