diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index 944e3a979..3643703a6 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -3,12 +3,6 @@
     class="ComponentPreview"
     :class="{ '-shadow-controls': shadowControl }"
   >
-    <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
-    <component
-      :is="'style'"
-      v-html="previewCss"
-    />
-    <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
     <label
       v-show="shadowControl"
       class="header"
@@ -17,7 +11,7 @@
       {{ $t('settings.style.shadows.offset') }}
     </label>
     <input
-      v-show="shadowControl && !hideControls"
+      v-show="shadowControl"
       :value="shadow?.y"
       :disabled="disabled"
       :class="{ disabled }"
@@ -26,7 +20,7 @@
       @input="e => updateProperty('y', e.target.value)"
     >
     <input
-      v-show="shadowControl && !hideControls"
+      v-show="shadowControl"
       :value="shadow?.y"
       :disabled="disabled"
       :class="{ disabled }"
@@ -47,14 +41,9 @@
       >
         {{ $t('settings.style.themes3.editor.test_string') }}
       </div>
-      <div v-if="invalid" class="invalid-container">
-        <div class="alert error invalid-label">
-          {{ $t('settings.style.themes3.editor.invalid') }}
-        </div>
-      </div>
     </div>
     <input
-      v-show="shadowControl && !hideControls"
+      v-show="shadowControl"
       :value="shadow?.x"
       :disabled="disabled"
       :class="{ disabled }"
@@ -63,7 +52,7 @@
       @input="e => updateProperty('x', e.target.value)"
     >
     <input
-      v-show="shadowControl && !hideControls"
+      v-show="shadowControl"
       :value="shadow?.x"
       :disabled="disabled"
       :class="{ disabled }"
@@ -96,9 +85,7 @@ export default {
     'shadowControl',
     'previewClass',
     'previewStyle',
-    'previewCss',
-    'disabled',
-    'invalid'
+    'disabled'
   ],
   emits: ['update:shadow'],
   data () {
@@ -106,14 +93,9 @@ export default {
       lightGrid: false
     }
   },
-  computed: {
-    hideControls () {
-      return typeof this.shadow === 'string'
-    }
-  },
   methods: {
     updateProperty (axis, value) {
-      this.$emit('update:shadow', { axis, value: Number(value) })
+      this.$emit('update:shadow', { axis, value })
     }
   }
 }
@@ -139,22 +121,6 @@ export default {
     line-height: 2;
   }
 
-  .invalid-container {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    background-color: rgba(100 0 0 / 50%);
-
-    .alert {
-      padding: 0.5em 1em;
-    }
-  }
-
   .input-light-grid {
     grid-area: options;
     justify-self: center;
@@ -204,7 +170,6 @@ export default {
       --__grid-color2-disabled: rgba(255 255 255 / 20%);
     }
 
-    position: relative;
     grid-area: preview;
     aspect-ratio: 1;
     display: flex;
diff --git a/src/components/modal/modals.style.js b/src/components/modal/modals.style.js
index 1cb4a34a7..f53a5f90f 100644
--- a/src/components/modal/modals.style.js
+++ b/src/components/modal/modals.style.js
@@ -1,6 +1,6 @@
 export default {
   name: 'Modals',
-  selector: ['.modal-view', '#modal', '.shout-panel'],
+  selector: '.modal-view',
   lazy: true,
   notEditable: true,
   validInnerComponents: [
diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js
index 1168f67d8..714e9c81e 100644
--- a/src/components/scrollbar.style.js
+++ b/src/components/scrollbar.style.js
@@ -1,6 +1,6 @@
 export default {
   name: 'Scrollbar',
-  selector: ['::-webkit-scrollbar-button', '::-webkit-scrollbar-thumb', '::-webkit-resizer'],
+  selector: '::-webkit-scrollbar',
   notEditable: true, // for now
   defaultRules: [
     {
diff --git a/src/components/select/select_motion.vue b/src/components/select/select_motion.vue
index b08d20887..57ffd7c33 100644
--- a/src/components/select/select_motion.vue
+++ b/src/components/select/select_motion.vue
@@ -4,7 +4,7 @@
   >
     <button
       class="btn button-default"
-      :disabled="disabled"
+      :disabled="disabled || shadowsAreNull"
       @click="add"
     >
       <FAIcon
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index d31a96038..b82e72677 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -21,7 +21,7 @@ import {
   getScopedVersion
 } from 'src/services/theme_data/css_utils.js'
 import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
-import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import { parseShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import {
   rgb2hex,
   hex2rgb,
@@ -371,11 +371,7 @@ export default {
           return shadow
         }
         if (typeof shadow === 'string') {
-          try {
-            return deserializeShadow(shadow)
-          } catch (e) {
-            console.warn(e)
-          }
+          return parseShadow(shadow)
         }
         return null
       })
@@ -584,7 +580,6 @@ export default {
 
     const selectedVirtualDirectiveId = ref(0)
     exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
-
     const selectedVirtualDirective = computed({
       get () {
         return virtualDirectives[selectedVirtualDirectiveId.value]
@@ -594,7 +589,6 @@ export default {
       }
     })
     exports.selectedVirtualDirective = selectedVirtualDirective
-
     exports.selectedVirtualDirectiveValType = computed({
       get () {
         return virtualDirectives[selectedVirtualDirectiveId.value].valType
@@ -613,56 +607,35 @@ export default {
         }
       }
     })
-
-    const draftVirtualDirectiveValid = ref(true)
-    const draftVirtualDirective = ref({})
-    exports.draftVirtualDirective = draftVirtualDirective
-
-    watch(
-      selectedVirtualDirective,
-      (directive) => {
-        switch (directive.valType) {
+    exports.selectedVirtualDirectiveParsed = computed({
+      get () {
+        switch (selectedVirtualDirective.value.valType) {
           case 'shadow': {
-            if (Array.isArray(directive.value)) {
-              draftVirtualDirective.value = normalizeShadows(directive.value)
+            const directiveValue = selectedVirtualDirective.value.value
+            if (Array.isArray(directiveValue)) {
+              return normalizeShadows(directiveValue)
             } else {
-              const splitShadow = directive.value.split(/,/g).map(x => x.trim())
-              draftVirtualDirective.value = normalizeShadows(splitShadow)
+              const splitShadow = directiveValue.split(/,/g).map(x => x.trim())
+              return normalizeShadows(splitShadow)
             }
-            break
           }
           case 'color':
-            draftVirtualDirective.value = directive.value
-            break
+            return selectedVirtualDirective.value.value
           default:
-            draftVirtualDirective.value = directive.value
+            return selectedVirtualDirective.value.value
+        }
+      },
+      set (value) {
+        switch (selectedVirtualDirective.value.valType) {
+          case 'shadow': {
+            virtualDirectives[selectedVirtualDirectiveId.value].value = value.map(x => serializeShadow(x)).join(', ')
             break
-        }
-      },
-      { immediate: true }
-    )
-
-    watch(
-      draftVirtualDirective,
-      (directive) => {
-        try {
-          switch (selectedVirtualDirective.value.valType) {
-            case 'shadow': {
-              virtualDirectives[selectedVirtualDirectiveId.value].value =
-                directive.map(x => serializeShadow(x)).join(', ')
-              break
-            }
-            default:
-              virtualDirectives[selectedVirtualDirectiveId.value].value = directive
           }
-          draftVirtualDirectiveValid.value = true
-        } catch (e) {
-          console.error('Invalid virtual directive value', e)
-          draftVirtualDirectiveValid.value = false
+          default:
+            virtualDirectives[selectedVirtualDirectiveId.value].value = value
         }
-      },
-      { immediate: true }
-    )
+      }
+    })
 
     exports.getNewVirtualDirective = () => ({
       name: 'newDirective',
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 3fa70cb66..4d0663370 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -148,7 +148,6 @@
             :shadow-control="isShadowTabOpen"
             :preview-class="previewClass"
             :preview-style="editorHintStyle"
-            :preview-css="previewCss"
             :disabled="!editedSubShadow && typeof editedShadow !== 'string'"
             :shadow="editedSubShadow"
             @update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
@@ -286,7 +285,7 @@
               :disabled="!isShadowPresent"
               :no-preview="true"
               :compact="true"
-              :static-vars="selectedPalette"
+              :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
               @subShadowSelected="onSubShadow"
             />
           </div>
@@ -409,14 +408,14 @@
           </div>
           <ShadowControl
             v-if="selectedVirtualDirectiveValType === 'shadow'"
-            v-model="draftVirtualDirective"
-            :static-vars="selectedPalette"
+            v-model="selectedVirtualDirectiveParsed"
+            :computeColor="computeColor"
             :compact="true"
           />
           <ColorInput
             v-if="selectedVirtualDirectiveValType === 'color'"
-            v-model="draftVirtualDirective"
-            :fallback="computeColor(draftVirtualDirective)"
+            v-model="selectedVirtualDirectiveParsed"
+            :fallback="computeColor(selectedVirtualDirectiveParsed)"
             :label="$t('settings.style.themes3.editor.variables.virtual_color')"
           />
         </div>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 146df43a9..00a55832f 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -957,7 +957,6 @@
             v-model="currentShadow"
             :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
             :fallback="currentShadowFallback"
-            :static-vars="previewTheme.colors"
           />
         </div>
         <div
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 22642340d..0ffba1834 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -5,13 +5,9 @@ import SelectMotion from 'src/components/select/select_motion.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
 import ComponentPreview from 'src/components/component_preview/component_preview.vue'
-import { rgb2hex } from 'src/services/color_convert/color_convert.js'
-import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
-import { deserializeShadow } from 'src/services/theme_data/iss_deserializer.js'
-import { getCssShadow, getCssShadowFilter } from 'src/services/theme_data/css_utils.js'
-import { findShadow, findColor } from 'src/services/theme_data/theme_data_3.service.js'
+import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { throttle, flattenDeep } from 'lodash'
+import { throttle } from 'lodash'
 import {
   faTimes,
   faChevronDown,
@@ -50,14 +46,13 @@ export default {
     'separateInset',
     'noPreview',
     'disabled',
-    'staticVars',
+    'computeColor',
     'compact'
   ],
   emits: ['update:modelValue', 'subShadowSelected'],
   data () {
     return {
-      selectedId: 0,
-      invalid: false
+      selectedId: 0
     }
   },
   components: {
@@ -102,7 +97,7 @@ export default {
       }
     },
     present () {
-      return this.selected != null && this.modelValue != null
+      return this.selected != null && !this.usingFallback
     },
     shadowsAreNull () {
       return this.modelValue == null
@@ -110,38 +105,31 @@ export default {
     currentFallback () {
       return this.fallback?.[this.selectedId]
     },
-    getColorFallback () {
-      if (this.staticVars && this.selected?.color) {
-        const computedColor = findColor(this.selected.color, { dynamicVars: {}, staticVars: this.staticVars }, true)
-        if (computedColor) return rgb2hex(computedColor)
-        return null
+    usingFallback () {
+      return this.modelValue == null
+    },
+    getFallback () {
+      if (typeof this.computeColor === 'function' && this.selected?.color) {
+        return this.computeColor(this.selected.color)
       } else {
         return this.currentFallback?.color
       }
     },
     style () {
       try {
-        let result
-        const serialized = this.cValue.map(x => serializeShadow(x)).join(',')
-        deserializeShadow(serialized) // validate
-        const expandedShadow = flattenDeep(findShadow(this.cValue, { dynamicVars: {}, staticVars: this.staticVars }))
-        const fixedShadows = expandedShadow.map(x => ({ ...x, color: console.log(x) || rgb2hex(x.color) }))
-
         if (this.separateInset) {
-          result = {
-            filter: getCssShadowFilter(fixedShadows),
-            boxShadow: getCssShadow(fixedShadows, true)
-          }
-        } else {
-          result = {
-            boxShadow: getCssShadow(fixedShadows)
+          return {
+            filter: getCssShadowFilter(this.cValue),
+            boxShadow: getCssShadow(this.cValue, true)
           }
         }
-        this.invalid = false
-        return result
+        return {
+          boxShadow: getCssShadow(this.cValue)
+        }
       } catch (e) {
-        console.error('Invalid shadow', e)
-        this.invalid = true
+        return {
+          border: '1px solid red'
+        }
       }
     }
   },
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 056eae0f7..1bbdbe2f7 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -5,11 +5,9 @@
   >
     <ComponentPreview
       v-if="!noPreview"
-      :invalid="invalid"
       class="shadow-preview"
       :shadow-control="true"
       :shadow="selected"
-      :preview-style="style"
       :disabled="disabled || !present"
       @update:shadow="({ axis, value }) => updateProperty(axis, value)"
     />
@@ -167,7 +165,7 @@
           :model-value="selected?.color"
           :disabled="disabled || !present"
           :label="$t('settings.style.common.color')"
-          :fallback="getColorFallback"
+          :fallback="getFallback"
           :show-optional-tickbox="false"
           name="shadow"
           @update:modelValue="e => updateProperty('color', e)"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 10d4fdb53..212b25911 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -793,10 +793,8 @@
           "text_color": "Text color",
           "icon_color": "Icon color",
           "link_color": "Link color",
-          "border_color": "Border color",
           "include_in_rule": "Add to rule",
           "test_string": "TEST",
-          "invalid": "Invalid",
           "refresh_preview": "Refresh preview",
           "apply_preview": "Apply",
           "text_auto": {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 73779cfbc..441b89654 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -56,7 +56,22 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
 
   getCssRules(themes3.eager, debug).forEach(rule => {
     // Hacks to support multiple selectors on same component
-    onNewRule(rule, false)
+    if (rule.match(/::-webkit-scrollbar-button/)) {
+      const parts = rule.split(/[{}]/g)
+      const newRule = [
+        parts[0],
+        ', ',
+        parts[0].replace(/button/, 'thumb'),
+        ', ',
+        parts[0].replace(/scrollbar-button/, 'resizer'),
+        ' {',
+        parts[1],
+        '}'
+      ].join('')
+      onNewRule(newRule, false)
+    } else {
+      onNewRule(rule, false)
+    }
   })
   onEagerFinished()
 
@@ -70,7 +85,22 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
     const chunk = chunks[counter]
     Promise.all(chunk.map(x => x())).then(result => {
       getCssRules(result.filter(x => x), debug).forEach(rule => {
-        onNewRule(rule, true)
+        if (rule.match(/\.modal-view/)) {
+          const parts = rule.split(/[{}]/g)
+          const newRule = [
+            parts[0],
+            ', ',
+            parts[0].replace(/\.modal-view/, '#modal'),
+            ', ',
+            parts[0].replace(/\.modal-view/, '.shout-panel'),
+            ' {',
+            parts[1],
+            '}'
+          ].join('')
+          onNewRule(newRule, true)
+        } else {
+          onNewRule(rule, true)
+        }
       })
       // const t1 = performance.now()
       // console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index a007bea28..cdde6b14b 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -1,11 +1,10 @@
 import { flattenDeep } from 'lodash'
 
-export const deserializeShadow = string => {
-  const modes = ['_full', 'inset', 'x', 'y', 'blur', 'spread', 'color', 'alpha', 'name']
+export const parseShadow = string => {
+  const modes = ['_full', 'inset', 'x', 'y', 'blur', 'spread', 'color', 'alpha']
   const regexPrep = [
     // inset keyword (optional)
-    '^',
-    '(?:(inset)\\s+)?',
+    '^(?:(inset)\\s+)?',
     // x
     '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)',
     // y
@@ -17,10 +16,7 @@ export const deserializeShadow = string => {
     // either hex, variable or function
     '(#[0-9a-f]{6}|--[a-z\\-_]+|\\$[a-z\\-()_]+)',
     // opacity (optional)
-    '(?:\\s+\\/\\s+([0-9]+(?:\\.[0-9]+)?)\\s*)?',
-    // name
-    '(?:\\s+#(\\w+)\\s*)?',
-    '$'
+    '(?:\\s+\\/\\s+([0-9]+(?:\\.[0-9]+)?)\\s*)?$'
   ].join('')
   const regex = new RegExp(regexPrep, 'gis') // global, (stable) indices, single-string
   const result = regex.exec(string)
@@ -28,11 +24,11 @@ export const deserializeShadow = string => {
     if (string.startsWith('$') || string.startsWith('--')) {
       return string
     } else {
-      throw new Error(`Invalid shadow definition: '${string}'`)
+      throw new Error(`Invalid shadow definition: ${string}`)
     }
   } else {
     const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha'])
-    const { x, y, blur, spread, alpha, inset, color, name } = Object.fromEntries(modes.map((mode, i) => {
+    const { x, y, blur, spread, alpha, inset, color } = Object.fromEntries(modes.map((mode, i) => {
       if (numeric.has(mode)) {
         const number = Number(result[i])
         if (Number.isNaN(number)) {
@@ -47,7 +43,7 @@ export const deserializeShadow = string => {
       }
     }).filter(([k, v]) => v !== false).slice(1))
 
-    return { x, y, blur, spread, color, alpha, inset, name }
+    return { x, y, blur, spread, color, alpha, inset }
   }
 }
 // this works nearly the same as HTML tree converter
@@ -154,7 +150,7 @@ export const deserialize = (input) => {
           if (realValue === 'none') {
             realValue = []
           } else {
-            realValue = value.split(',').map(v => deserializeShadow(v.trim()))
+            realValue = value.split(',').map(v => parseShadow(v.trim()))
           }
         } if (!Number.isNaN(Number(value))) {
           realValue = Number(value)
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
index 9e553eabd..e4df416e9 100644
--- a/src/services/theme_data/iss_serializer.js
+++ b/src/services/theme_data/iss_serializer.js
@@ -1,13 +1,8 @@
 import { unroll } from './iss_utils.js'
-import { deserializeShadow } from './iss_deserializer.js'
 
 export const serializeShadow = (s, throwOnInvalid) => {
   if (typeof s === 'object') {
-    const inset = s.inset ? 'inset ' : ''
-    const name = s.name ? ` #${s.name} ` : ''
-    const result = `${inset}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}${name}`
-    deserializeShadow(result) // Verify that output is valid and parseable
-    return result
+    return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
   } else {
     return s
   }
diff --git a/src/services/theme_data/iss_utils.js b/src/services/theme_data/iss_utils.js
index a0914ee28..75f8dd93c 100644
--- a/src/services/theme_data/iss_utils.js
+++ b/src/services/theme_data/iss_utils.js
@@ -56,74 +56,43 @@ export const getAllPossibleCombinations = (array) => {
  *
  * @returns {String} CSS selector (or path)
  */
-export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelector, liteMode, children) => {
-  const isParent = !!children
+export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelector, isParent) => {
   if (!rule && !isParent) return null
   const component = components[rule.component]
-  const { states = {}, variants = {}, outOfTreeSelector } = component
+  const { states = {}, variants = {}, selector, outOfTreeSelector } = component
 
-  const expand = (array = [], subArray = []) => {
-    if (array.length === 0) return subArray.map(x => [x])
-    if (subArray.length === 0) return array.map(x => [x])
-    return array.map(a => {
-      return subArray.map(b => [a, b])
-    }).flat()
-  }
-
-  let componentSelectors = Array.isArray(component.selector) ? component.selector : [component.selector]
-  if (ignoreOutOfTreeSelector || liteMode) componentSelectors = [componentSelectors[0]]
-  componentSelectors = componentSelectors.map(selector => {
-    if (selector === ':root') {
-      return ''
-    } else if (isParent) {
-      return selector
-    } else {
-      if (outOfTreeSelector && !ignoreOutOfTreeSelector) return outOfTreeSelector
-      return selector
-    }
-  })
+  const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
 
   const applicableVariantName = (rule.variant || 'normal')
-  let variantSelectors = null
+  let applicableVariant = ''
   if (applicableVariantName !== 'normal') {
-    variantSelectors = variants[applicableVariantName]
+    applicableVariant = variants[applicableVariantName]
   } else {
-    variantSelectors = variants?.normal ?? ''
+    applicableVariant = variants?.normal ?? ''
   }
-  variantSelectors = Array.isArray(variantSelectors) ? variantSelectors : [variantSelectors]
-  if (ignoreOutOfTreeSelector || liteMode) variantSelectors = [variantSelectors[0]]
 
-  const applicableStates = (rule.state || []).filter(x => x !== 'normal')
-  // const applicableStates = (rule.state || [])
-  const statesSelectors = applicableStates.map(state => {
-    const selector = states[state] || ''
-    let arraySelector = Array.isArray(selector) ? selector : [selector]
-    if (ignoreOutOfTreeSelector || liteMode) arraySelector = [arraySelector[0]]
-    arraySelector
-      .sort((a, b) => {
-        if (a.startsWith(':')) return 1
-        if (/^[a-z]/.exec(a)) return -1
-        else return 0
-      })
-      .join('')
-    return arraySelector
-  })
+  let realSelector
+  if (selector === ':root') {
+    realSelector = ''
+  } else if (isParent) {
+    realSelector = selector
+  } else {
+    if (outOfTreeSelector && !ignoreOutOfTreeSelector) realSelector = outOfTreeSelector
+    else realSelector = selector
+  }
 
-  const statesSelectorsFlat = statesSelectors.reduce((acc, s) => {
-    return expand(acc, s).map(st => st.join(''))
-  }, [])
-
-  const componentVariant = expand(componentSelectors, variantSelectors).map(cv => cv.join(''))
-  const componentVariantStates = expand(componentVariant, statesSelectorsFlat).map(cvs => cvs.join(''))
-  const selectors = expand(componentVariantStates, children).map(cvsc => cvsc.join(' '))
-  /*
-  */
+  const selectors = [realSelector, applicableVariant, ...applicableStates]
+    .sort((a, b) => {
+      if (a.startsWith(':')) return 1
+      if (/^[a-z]/.exec(a)) return -1
+      else return 0
+    })
+    .join('')
 
   if (rule.parent) {
-    return genericRuleToSelector(components)(rule.parent, ignoreOutOfTreeSelector, liteMode, selectors)
+    return (genericRuleToSelector(components)(rule.parent, ignoreOutOfTreeSelector, true) + ' ' + selectors).trim()
   }
-
-  return selectors.join(', ').trim()
+  return selectors.trim()
 }
 
 /**
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index b05968813..aaa253283 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -22,7 +22,7 @@ import {
   normalizeCombination,
   findRules
 } from './iss_utils.js'
-import { deserializeShadow } from './iss_deserializer.js'
+import { parseShadow } from './iss_deserializer.js'
 
 // Ensuring the order of components
 const components = {
@@ -37,7 +37,7 @@ const components = {
   ChatMessage: null
 }
 
-export const findShadow = (shadows, { dynamicVars, staticVars }) => {
+const findShadow = (shadows, { dynamicVars, staticVars }) => {
   return (shadows || []).map(shadow => {
     let targetShadow
     if (typeof shadow === 'string') {
@@ -48,7 +48,7 @@ export const findShadow = (shadows, { dynamicVars, staticVars }) => {
         const variableSlot = shadow.substring(2)
         return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
       } else {
-        targetShadow = deserializeShadow(shadow)
+        targetShadow = parseShadow(shadow)
       }
     } else {
       targetShadow = shadow