how to handle scoped or nested selectors

[dagda1]

Hi,

Loving the project, great work.

I have the following sass that I am trying to convert to vanilla.css

  @include mq-m {
    &.horizontal {
      flex-direction: row;
      flex: 1;
      flex-wrap: wrap;
      align-items: center;

      .wrapper {
        flex: 1;
      }

      label {
        @include mr(1);
      }

      [role='alert'] {
        width: 100%;
      }
    }
  }

I have this:

export const horizontal = style(
  responsiveStyle({
    mobile: {
      marginTop: vars.space['2x'],
      marginBottom: vars.space['2x'],
    },
    tablet: {
      marginTop: vars.space['4x'],
      marginBottom: vars.space['4x'],
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'center',
      flex: 1,
    },
  }),
);

what is the best way to handle the

      label {
        @include mr(1);
      }

      [role='alert'] {
        width: 100%;
      }
    }

Should I do something like this and then add it to the label?

export const horizontalLabel = style(
  responsiveStyle({
    mobile: {},
    tablet: {
      selectors: {
        [`${horizontal} &`]
      }
    }
  })
)

and then attach it to the label

import * as styles from './whatever.css.ts';`

<Label className={styles.horizontalLabel}>blah</Label>

Is there anyway create a global style something like this:

export const h = globalStyle(
  responsiveStyle({
    mobile: {},
    tablet: {
      selectors: {
        [`${horizontal} label &`]: {
          marginRight: vars.space['2x'],
        },
        [`${horizontal} [role='alert'] &`]: {
          width: '100%',
        },
      },
    },
  }),
);

[rostero1]

Similarly, how can I target only the first instance of [data-reach-tabs]?