export default {
  plugins: {
    'postcss-prefix-selector': {
      prefix: '#overlay-root',
      // Exclude selectors that should NOT be prefixed
      exclude: [
        ':root', // Keep CSS variables at root
        'html',
        'body',
        /^\[vaul-/, // Don't prefix vaul attributes
        /^\.box-opening-modal-drawer/, // Your custom classes that already work
        /^\.cssdk-/, // Your SDK custom classes
        /^div#overlay-root/, // Selectors already starting with #overlay-root
        /^#overlay-root/,
        /^@keyframes/, // Don't prefix animations
        /^\.tmanetwork_/, // TMA Network classes
      ],
      transform(_, selector, prefixedSelector) {
        // Don't prefix pseudo-elements and special selectors
        if (selector.includes(':root') || selector.includes('@') || selector.startsWith('::')) {
          return selector;
        }

        // If selector already contains #overlay-root, don't double-prefix
        if (selector.includes('#overlay-root')) {
          return selector;
        }

        return prefixedSelector;
      },
    },
  },
};
