How to select the parent of a parent in JSS?

Question

css

How to select parent of parent in jss ?

'@global': {
        '.header-block': {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',

            '&&_open': {
                display: 'flex',
                flexDirection: 'column',
                background: colors.black.hex,
                width: '100%',
                height: '100%',
                position: 'fixed',
                top: 0,
                left: 0,
                padding: '15px 20px 20px',
                zIndex: 100,
                boxSizing: 'border-box',
                
                '& .header-block__menu': {

                },

                '& .header-block__btn': {
                    width: '100%'
                }
            },

Answer 1

As an option:

const mainSelector = '.header-block';

const styles = {
  '@global': {
    [mainSelector]: {
      '&&_open': {

        [`& ${mainSelector}__menu`]: {
        },

        [`& ${mainSelector}__btn`]: {
        },
      },
    },
  },
};