scu-web-components 0.0.49 → 0.0.50

package/dist/tokens/source/componentScssMixins.json

@@ -162,8 +162,8 @@
       "namespace": "default-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-default-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-default-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "default-super-heading-mixins.text"
     },
     "sizing": {
@@ -308,8 +308,8 @@
       "namespace": "default-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-default-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-default-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "default-action-mixins.box"
     },
     "sizing": {
@@ -464,8 +464,8 @@
       "namespace": "color-mortgage-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    color: var( --scw-color-mortgage-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    color: var( --scw-color-mortgage-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    color: var( --scw-color-mortgage-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    color: var( --scw-color-mortgage-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "color-mortgage-super-heading-mixins.text"
     },
     "sizing": {
@@ -610,8 +610,8 @@
       "namespace": "color-mortgage-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-mortgage-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-color-mortgage-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-mortgage-action-mixins.box"
     },
     "sizing": {
@@ -766,8 +766,8 @@
       "namespace": "color-savings-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-color-savings-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    color: var( --scw-color-savings-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    color: var( --scw-color-savings-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-color-savings-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    color: var( --scw-color-savings-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    color: var( --scw-color-savings-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "color-savings-super-heading-mixins.text"
     },
     "sizing": {
@@ -912,8 +912,8 @@
       "namespace": "color-savings-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-savings-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-color-savings-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-savings-action-mixins.box"
     },
     "sizing": {
@@ -1068,8 +1068,8 @@
       "namespace": "color-student-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-color-student-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    color: var( --scw-color-student-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    color: var( --scw-color-student-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-color-student-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    color: var( --scw-color-student-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    color: var( --scw-color-student-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "color-student-super-heading-mixins.text"
     },
     "sizing": {
@@ -1261,8 +1261,8 @@
       "namespace": "color-student-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-student-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-color-student-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-student-action-mixins.box"
     },
     "sizing": {
@@ -1417,8 +1417,8 @@
       "namespace": "color-investments-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-color-investments-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    color: var( --scw-color-investments-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    color: var( --scw-color-investments-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-color-investments-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    color: var( --scw-color-investments-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    color: var( --scw-color-investments-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "color-investments-super-heading-mixins.text"
     },
     "sizing": {
@@ -1563,8 +1563,8 @@
       "namespace": "color-investments-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-investments-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-color-investments-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-investments-action-mixins.box"
     },
     "sizing": {
@@ -1719,8 +1719,8 @@
       "namespace": "color-checking-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-color-checking-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    color: var( --scw-color-checking-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    color: var( --scw-color-checking-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-color-checking-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    color: var( --scw-color-checking-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    color: var( --scw-color-checking-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "color-checking-super-heading-mixins.text"
     },
     "sizing": {
@@ -1865,8 +1865,8 @@
       "namespace": "color-checking-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-checking-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-color-checking-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-checking-action-mixins.box"
     },
     "sizing": {
@@ -2021,8 +2021,8 @@
       "namespace": "color-credit-cards-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    color: var( --scw-color-credit-cards-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    color: var( --scw-color-credit-cards-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    color: var( --scw-color-credit-cards-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    color: var( --scw-color-credit-cards-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "color-credit-cards-super-heading-mixins.text"
     },
     "sizing": {
@@ -2167,8 +2167,8 @@
       "namespace": "color-credit-cards-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-color-credit-cards-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-color-credit-cards-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "color-credit-cards-action-mixins.box"
     },
     "sizing": {
@@ -2474,8 +2474,8 @@
       "namespace": "size-medium-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-action-mixins.box"
     },
     "sizing": {
@@ -2630,8 +2630,8 @@
       "namespace": "size-medium-color-mortgage-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-mortgage-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    color: var( --scw-color-mortgage-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    color: var( --scw-color-mortgage-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-mortgage-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    color: var( --scw-color-mortgage-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    color: var( --scw-color-mortgage-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-medium-color-mortgage-super-heading-mixins.text"
     },
     "sizing": {
@@ -2776,8 +2776,8 @@
       "namespace": "size-medium-color-mortgage-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-mortgage-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-mortgage-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-mortgage-04 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-mortgage-action-mixins.box"
     },
     "sizing": {
@@ -2932,8 +2932,8 @@
       "namespace": "size-medium-color-savings-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-savings-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    color: var( --scw-color-savings-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    color: var( --scw-color-savings-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-savings-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    color: var( --scw-color-savings-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    color: var( --scw-color-savings-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-medium-color-savings-super-heading-mixins.text"
     },
     "sizing": {
@@ -3078,8 +3078,8 @@
       "namespace": "size-medium-color-savings-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-savings-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-savings-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-savings-04 ) );\n  } @else {\n    background-color: var( --scw-color-savings-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-savings-action-mixins.box"
     },
     "sizing": {
@@ -3234,8 +3234,8 @@
       "namespace": "size-medium-color-student-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-student-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    color: var( --scw-color-student-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    color: var( --scw-color-student-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-student-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    color: var( --scw-color-student-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    color: var( --scw-color-student-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-medium-color-student-super-heading-mixins.text"
     },
     "sizing": {
@@ -3380,8 +3380,8 @@
       "namespace": "size-medium-color-student-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-student-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-student-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-student-04 ) );\n  } @else {\n    background-color: var( --scw-color-student-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-student-action-mixins.box"
     },
     "sizing": {
@@ -3536,8 +3536,8 @@
       "namespace": "size-medium-color-investments-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-investments-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    color: var( --scw-color-investments-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    color: var( --scw-color-investments-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-investments-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    color: var( --scw-color-investments-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    color: var( --scw-color-investments-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-medium-color-investments-super-heading-mixins.text"
     },
     "sizing": {
@@ -3682,8 +3682,8 @@
       "namespace": "size-medium-color-investments-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-investments-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-investments-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-investments-04 ) );\n  } @else {\n    background-color: var( --scw-color-investments-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-investments-action-mixins.box"
     },
     "sizing": {
@@ -3838,8 +3838,8 @@
       "namespace": "size-medium-color-checking-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-checking-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    color: var( --scw-color-checking-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    color: var( --scw-color-checking-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-checking-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    color: var( --scw-color-checking-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    color: var( --scw-color-checking-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-medium-color-checking-super-heading-mixins.text"
     },
     "sizing": {
@@ -3984,8 +3984,8 @@
       "namespace": "size-medium-color-checking-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-checking-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-checking-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-checking-04 ) );\n  } @else {\n    background-color: var( --scw-color-checking-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-checking-action-mixins.box"
     },
     "sizing": {
@@ -4140,8 +4140,8 @@
       "namespace": "size-medium-color-credit-cards-super-heading-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-credit-cards-super-heading (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    color: var( --scw-color-credit-cards-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    color: var( --scw-color-credit-cards-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-credit-cards-super-heading (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    color: var( --scw-color-credit-cards-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    color: var( --scw-color-credit-cards-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-medium-color-credit-cards-super-heading-mixins.text"
     },
     "sizing": {
@@ -4286,8 +4286,8 @@
       "namespace": "size-medium-color-credit-cards-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-card-size-medium-color-credit-cards-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-card-size-medium-color-credit-cards-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-credit-cards-04 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "size-medium-color-credit-cards-action-mixins.box"
     },
     "sizing": {
@@ -5482,8 +5482,8 @@
       "namespace": "default-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-default (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-link-default (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "default-mixins.box"
     },
     "sizing": {
@@ -5737,8 +5737,8 @@
       "namespace": "design-text-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-design-text-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-design-text-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "design-text-label-mixins.text"
     },
     "sizing": {
@@ -5784,8 +5784,8 @@
       "namespace": "design-text-underline-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-design-text-underline (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-link-design-text-underline (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "design-text-underline-mixins.box"
     },
     "sizing": {
@@ -5888,8 +5888,8 @@
       "namespace": "state-hover-design-text-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-state-hover-design-text-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-design-text-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
       "outputSegmentRef": "state-hover-design-text-label-mixins.text"
     },
     "sizing": {
@@ -5935,8 +5935,8 @@
       "namespace": "state-hover-design-text-underline-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-hover-design-text-underline (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-design-text-underline (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "state-hover-design-text-underline-mixins.box"
     },
     "sizing": {
@@ -6190,8 +6190,8 @@
       "namespace": "state-focused-design-text-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-state-focused-design-text-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-design-text-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
       "outputSegmentRef": "state-focused-design-text-label-mixins.text"
     },
     "sizing": {
@@ -6237,8 +6237,8 @@
       "namespace": "state-focused-design-text-underline-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-focused-design-text-underline (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-design-text-underline (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "state-focused-design-text-underline-mixins.box"
     },
     "sizing": {
@@ -6289,8 +6289,8 @@
       "namespace": "design-outlined-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "design-outlined-mixins.box"
     },
     "sizing": {
@@ -6393,8 +6393,8 @@
       "namespace": "design-outlined-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-design-outlined-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-design-outlined-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "design-outlined-label-mixins.text"
     },
     "sizing": {
@@ -6492,8 +6492,8 @@
       "namespace": "icon-left-design-outlined-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-icon-left-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-icon-left-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "icon-left-design-outlined-mixins.box"
     },
     "sizing": {
@@ -6596,8 +6596,8 @@
       "namespace": "icon-left-design-outlined-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-icon-left-design-outlined-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-icon-left-design-outlined-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "icon-left-design-outlined-label-mixins.text"
     },
     "sizing": {
@@ -6695,8 +6695,8 @@
       "namespace": "icon-left-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-icon-left (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-link-icon-left (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "icon-left-mixins.box"
     },
     "sizing": {
@@ -6898,8 +6898,8 @@
       "namespace": "icon-right-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-icon-right (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-link-icon-right (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "icon-right-mixins.box"
     },
     "sizing": {
@@ -7101,8 +7101,8 @@
       "namespace": "state-hover-icon-left-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-hover-icon-left (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-icon-left (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "state-hover-icon-left-mixins.box"
     },
     "sizing": {
@@ -7304,8 +7304,8 @@
       "namespace": "state-hover-icon-right-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-hover-icon-right (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-icon-right (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "state-hover-icon-right-mixins.box"
     },
     "sizing": {
@@ -7507,8 +7507,8 @@
       "namespace": "state-focused-icon-left-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-focused-icon-left (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-icon-left (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-icon-left-mixins.box"
     },
     "sizing": {
@@ -7710,8 +7710,8 @@
       "namespace": "state-focused-icon-right-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-focused-icon-right (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-icon-right (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-icon-right-mixins.box"
     },
     "sizing": {
@@ -8319,8 +8319,8 @@
       "namespace": "state-hover-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-hover (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "output": "\n@mixin comp-scw-link-state-hover (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    background-color: var( --scw-color-primary-01 );\n  }\n  border-radius: 6px 6px 6px 6px; \n}",
       "outputSegmentRef": "state-hover-mixins.box"
     },
     "sizing": {
@@ -8522,8 +8522,8 @@
       "namespace": "state-hover-design-outlined-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-hover-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
       "outputSegmentRef": "state-hover-design-outlined-mixins.box"
     },
     "sizing": {
@@ -8626,8 +8626,8 @@
       "namespace": "state-hover-design-outlined-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-state-hover-design-outlined-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-design-outlined-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
       "outputSegmentRef": "state-hover-design-outlined-label-mixins.text"
     },
     "sizing": {
@@ -8725,8 +8725,8 @@
       "namespace": "state-hover-icon-left-design-outlined-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-hover-icon-left-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-icon-left-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
       "outputSegmentRef": "state-hover-icon-left-design-outlined-mixins.box"
     },
     "sizing": {
@@ -8829,8 +8829,8 @@
       "namespace": "state-hover-icon-left-design-outlined-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-state-hover-icon-left-design-outlined-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-icon-left-design-outlined-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
       "outputSegmentRef": "state-hover-icon-left-design-outlined-label-mixins.text"
     },
     "sizing": {
@@ -8928,8 +8928,8 @@
       "namespace": "state-focused-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-focused (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-link-state-focused (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-mixins.box"
     },
     "sizing": {
@@ -9131,8 +9131,8 @@
       "namespace": "state-focused-design-outlined-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-focused-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-design-outlined-mixins.box"
     },
     "sizing": {
@@ -9235,8 +9235,8 @@
       "namespace": "state-focused-design-outlined-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-state-focused-design-outlined-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-design-outlined-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "state-focused-design-outlined-label-mixins.text"
     },
     "sizing": {
@@ -9334,8 +9334,8 @@
       "namespace": "state-focused-icon-left-design-outlined-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-focused-icon-left-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-icon-left-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-icon-left-design-outlined-mixins.box"
     },
     "sizing": {
@@ -9438,8 +9438,8 @@
       "namespace": "state-focused-icon-left-design-outlined-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-state-focused-icon-left-design-outlined-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-icon-left-design-outlined-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "state-focused-icon-left-design-outlined-label-mixins.text"
     },
     "sizing": {
@@ -10146,8 +10146,8 @@
       "namespace": "icon-right-design-outlined-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-icon-right-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-icon-right-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "icon-right-design-outlined-mixins.box"
     },
     "sizing": {
@@ -10250,8 +10250,8 @@
       "namespace": "icon-right-design-outlined-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-icon-right-design-outlined-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-icon-right-design-outlined-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "icon-right-design-outlined-label-mixins.text"
     },
     "sizing": {
@@ -10349,8 +10349,8 @@
       "namespace": "state-hover-icon-right-design-outlined-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-hover-icon-right-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-icon-right-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    border-color: var( --scw-color-primary-01 );\n  } \n}",
       "outputSegmentRef": "state-hover-icon-right-design-outlined-mixins.box"
     },
     "sizing": {
@@ -10453,8 +10453,8 @@
       "namespace": "state-hover-icon-right-design-outlined-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-state-hover-icon-right-design-outlined-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-hover-icon-right-design-outlined-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-01 , var( --scw-color-primary-01 ) );\n  } @else {\n    color: var( --scw-color-primary-01 );\n  } \n}",
       "outputSegmentRef": "state-hover-icon-right-design-outlined-label-mixins.text"
     },
     "sizing": {
@@ -10552,8 +10552,8 @@
       "namespace": "state-focused-icon-right-design-outlined-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-link-state-focused-icon-right-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-icon-right-design-outlined (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    border-color: var( --scw-color-primary-04 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-icon-right-design-outlined-mixins.box"
     },
     "sizing": {
@@ -10656,8 +10656,8 @@
       "namespace": "state-focused-icon-right-design-outlined-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-link-state-focused-icon-right-design-outlined-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-link-state-focused-icon-right-design-outlined-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "state-focused-icon-right-design-outlined-label-mixins.text"
     },
     "sizing": {
@@ -11161,8 +11161,8 @@
       "namespace": "state-hover-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-menu-item-state-hover-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-menu-item-state-hover-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "state-hover-label-mixins.text"
     },
     "sizing": {
@@ -11406,8 +11406,8 @@
       "namespace": "state-selected-selected-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-menu-item-state-selected-selected (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-menu-item-state-selected-selected (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "state-selected-selected-mixins.box"
     },
     "sizing": {
@@ -11864,8 +11864,8 @@
       "namespace": "design-utility-state-hover-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-menu-item-design-utility-state-hover-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-menu-item-design-utility-state-hover-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "design-utility-state-hover-icon-vector-mixins.box"
     },
     "sizing": {
@@ -11916,8 +11916,8 @@
       "namespace": "design-utility-state-hover-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-menu-item-design-utility-state-hover-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-menu-item-design-utility-state-hover-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "design-utility-state-hover-label-mixins.text"
     },
     "sizing": {
@@ -12270,8 +12270,8 @@
       "namespace": "design-utility-state-selected-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-menu-item-design-utility-state-selected-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  } \n}",
+      "output": "\n@mixin comp-scw-menu-item-design-utility-state-selected-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  } \n}",
       "outputSegmentRef": "design-utility-state-selected-icon-vector-mixins.box"
     },
     "sizing": {
@@ -12322,8 +12322,8 @@
       "namespace": "design-utility-state-selected-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-menu-item-design-utility-state-selected-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-menu-item-design-utility-state-selected-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "design-utility-state-selected-label-mixins.text"
     },
     "sizing": {
@@ -12572,8 +12572,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-alert (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  align-self: stretch;\n  flex: 1; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  align-self: stretch;\n  flex: 1; \n}",
+      "output": "\n@mixin comp-scw-alert (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  align-self: stretch;\n  flex: 1; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  align-self: stretch;\n  flex: 1; \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -12624,8 +12624,8 @@
       "namespace": "message-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-alert-message (\n  $themeVar: '--scw-color'\n) { \n  text-align: CENTER;\n  font: var( --scw-type-text-bold-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-dark , var( --scw-color-error-dark ) );\n  } @else {\n    color: var( --scw-color-error-dark );\n  }\n  flex: 1; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: CENTER;\n  font: var( --scw-type-text-bold-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-dark , var( --scw-color-error-dark ) );\n  } @else {\n    color: var( --scw-color-error-dark );\n  }\n  flex: 1; \n}",
+      "output": "\n@mixin comp-scw-alert-message (\n  $themeVar: false\n) { \n  text-align: CENTER;\n  font: var( --scw-type-text-bold-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-dark , var( --scw-color-error-dark ) );\n  } @else {\n    color: var( --scw-color-error-dark );\n  }\n  flex: 1; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: CENTER;\n  font: var( --scw-type-text-bold-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-dark , var( --scw-color-error-dark ) );\n  } @else {\n    color: var( --scw-color-error-dark );\n  }\n  flex: 1; \n}",
       "outputSegmentRef": "message-mixins.text"
     },
     "sizing": {
@@ -12671,8 +12671,8 @@
       "namespace": "description-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-alert-description (\n  $themeVar: '--scw-color'\n) { \n  text-align: CENTER;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-dark , var( --scw-color-error-dark ) );\n  } @else {\n    color: var( --scw-color-error-dark );\n  }\n  flex: 1; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: CENTER;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-dark , var( --scw-color-error-dark ) );\n  } @else {\n    color: var( --scw-color-error-dark );\n  }\n  flex: 1; \n}",
+      "output": "\n@mixin comp-scw-alert-description (\n  $themeVar: false\n) { \n  text-align: CENTER;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-dark , var( --scw-color-error-dark ) );\n  } @else {\n    color: var( --scw-color-error-dark );\n  }\n  flex: 1; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: CENTER;\n  font: var( --scw-type-text-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-dark , var( --scw-color-error-dark ) );\n  } @else {\n    color: var( --scw-color-error-dark );\n  }\n  flex: 1; \n}",
       "outputSegmentRef": "description-mixins.text"
     },
     "sizing": {
@@ -13706,8 +13706,8 @@
       "namespace": "color-primary-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-color-primary-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-color-primary-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "color-primary-icon-vector-mixins.box"
     },
     "sizing": {
@@ -13862,8 +13862,8 @@
       "namespace": "color-mortgage-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-color-mortgage-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-color-mortgage-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
       "outputSegmentRef": "color-mortgage-icon-vector-mixins.box"
     },
     "sizing": {
@@ -14018,8 +14018,8 @@
       "namespace": "color-savings-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-color-savings-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-color-savings-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
       "outputSegmentRef": "color-savings-icon-vector-mixins.box"
     },
     "sizing": {
@@ -14174,8 +14174,8 @@
       "namespace": "color-student-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-color-student-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-color-student-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
       "outputSegmentRef": "color-student-icon-vector-mixins.box"
     },
     "sizing": {
@@ -14330,8 +14330,8 @@
       "namespace": "color-credit-cards-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-color-credit-cards-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-color-credit-cards-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
       "outputSegmentRef": "color-credit-cards-icon-vector-mixins.box"
     },
     "sizing": {
@@ -14486,8 +14486,8 @@
       "namespace": "color-investments-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-color-investments-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-color-investments-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
       "outputSegmentRef": "color-investments-icon-vector-mixins.box"
     },
     "sizing": {
@@ -14642,8 +14642,8 @@
       "namespace": "color-checking-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-color-checking-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-color-checking-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
       "outputSegmentRef": "color-checking-icon-vector-mixins.box"
     },
     "sizing": {
@@ -14694,8 +14694,8 @@
       "namespace": "background-color-primary-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-primary (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-primary (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-primary-mixins.box"
     },
     "sizing": {
@@ -14850,8 +14850,8 @@
       "namespace": "background-color-information-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-information (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-information (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-information-mixins.box"
     },
     "sizing": {
@@ -15006,8 +15006,8 @@
       "namespace": "background-color-warning-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-warning (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-warning-light ) );\n  } @else {\n    background-color: var( --scw-color-warning-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-warning-light ) );\n  } @else {\n    background-color: var( --scw-color-warning-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-warning (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-warning-light ) );\n  } @else {\n    background-color: var( --scw-color-warning-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-warning-light ) );\n  } @else {\n    background-color: var( --scw-color-warning-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-warning-mixins.box"
     },
     "sizing": {
@@ -15162,8 +15162,8 @@
       "namespace": "background-color-error-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-error (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-error (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-error-mixins.box"
     },
     "sizing": {
@@ -15318,8 +15318,8 @@
       "namespace": "background-color-success-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-success (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-success (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-success-mixins.box"
     },
     "sizing": {
@@ -15474,8 +15474,8 @@
       "namespace": "background-color-mortgage-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-mortgage (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-mortgage (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-mortgage-mixins.box"
     },
     "sizing": {
@@ -15630,8 +15630,8 @@
       "namespace": "background-color-savings-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-savings (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-savings (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-savings-mixins.box"
     },
     "sizing": {
@@ -15786,8 +15786,8 @@
       "namespace": "background-color-student-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-student (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-student (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-student-mixins.box"
     },
     "sizing": {
@@ -15942,8 +15942,8 @@
       "namespace": "background-color-credit-cards-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-credit-cards (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-credit-cards (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-credit-cards-mixins.box"
     },
     "sizing": {
@@ -16098,8 +16098,8 @@
       "namespace": "background-color-investments-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-investments (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-investments (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-investments-mixins.box"
     },
     "sizing": {
@@ -16254,8 +16254,8 @@
       "namespace": "background-color-checking-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-background-color-checking (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-background-color-checking (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "background-color-checking-mixins.box"
     },
     "sizing": {
@@ -16670,8 +16670,8 @@
       "namespace": "state-hover-color-primary-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-color-primary-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-color-primary-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "state-hover-color-primary-icon-vector-mixins.box"
     },
     "sizing": {
@@ -16826,8 +16826,8 @@
       "namespace": "state-hover-color-mortgage-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-color-mortgage-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-color-mortgage-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
       "outputSegmentRef": "state-hover-color-mortgage-icon-vector-mixins.box"
     },
     "sizing": {
@@ -16982,8 +16982,8 @@
       "namespace": "state-hover-color-savings-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-color-savings-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-color-savings-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
       "outputSegmentRef": "state-hover-color-savings-icon-vector-mixins.box"
     },
     "sizing": {
@@ -17138,8 +17138,8 @@
       "namespace": "state-hover-color-student-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-color-student-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-color-student-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
       "outputSegmentRef": "state-hover-color-student-icon-vector-mixins.box"
     },
     "sizing": {
@@ -17294,8 +17294,8 @@
       "namespace": "state-hover-color-credit-cards-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-color-credit-cards-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-color-credit-cards-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
       "outputSegmentRef": "state-hover-color-credit-cards-icon-vector-mixins.box"
     },
     "sizing": {
@@ -17450,8 +17450,8 @@
       "namespace": "state-hover-color-investments-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-color-investments-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-color-investments-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
       "outputSegmentRef": "state-hover-color-investments-icon-vector-mixins.box"
     },
     "sizing": {
@@ -17606,8 +17606,8 @@
       "namespace": "state-hover-color-checking-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-color-checking-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-color-checking-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
       "outputSegmentRef": "state-hover-color-checking-icon-vector-mixins.box"
     },
     "sizing": {
@@ -17658,8 +17658,8 @@
       "namespace": "state-hover-background-color-primary-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-primary (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-primary-06 ) );\n  } @else {\n    background-color: var( --scw-color-primary-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-primary-06 ) );\n  } @else {\n    background-color: var( --scw-color-primary-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-primary (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-primary-06 ) );\n  } @else {\n    background-color: var( --scw-color-primary-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-primary-06 ) );\n  } @else {\n    background-color: var( --scw-color-primary-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-primary-mixins.box"
     },
     "sizing": {
@@ -17814,8 +17814,8 @@
       "namespace": "state-hover-background-color-information-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-information (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-information ) );\n  } @else {\n    background-color: var( --scw-color-information );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-information ) );\n  } @else {\n    background-color: var( --scw-color-information );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-information (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-information ) );\n  } @else {\n    background-color: var( --scw-color-information );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-information ) );\n  } @else {\n    background-color: var( --scw-color-information );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-information-mixins.box"
     },
     "sizing": {
@@ -17970,8 +17970,8 @@
       "namespace": "state-hover-background-color-warning-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-warning (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-warning ) );\n  } @else {\n    background-color: var( --scw-color-warning );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-warning ) );\n  } @else {\n    background-color: var( --scw-color-warning );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-warning (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-warning ) );\n  } @else {\n    background-color: var( --scw-color-warning );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-warning ) );\n  } @else {\n    background-color: var( --scw-color-warning );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-warning-mixins.box"
     },
     "sizing": {
@@ -18126,8 +18126,8 @@
       "namespace": "state-hover-background-color-error-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-error (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-error ) );\n  } @else {\n    background-color: var( --scw-color-error );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-error ) );\n  } @else {\n    background-color: var( --scw-color-error );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-error (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-error ) );\n  } @else {\n    background-color: var( --scw-color-error );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-error ) );\n  } @else {\n    background-color: var( --scw-color-error );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-error-mixins.box"
     },
     "sizing": {
@@ -18282,8 +18282,8 @@
       "namespace": "state-hover-background-color-success-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-success (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-success ) );\n  } @else {\n    background-color: var( --scw-color-success );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-success ) );\n  } @else {\n    background-color: var( --scw-color-success );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-success (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-success ) );\n  } @else {\n    background-color: var( --scw-color-success );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-success ) );\n  } @else {\n    background-color: var( --scw-color-success );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-success-mixins.box"
     },
     "sizing": {
@@ -18438,8 +18438,8 @@
       "namespace": "state-hover-background-color-mortgage-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-mortgage (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-mortgage-06 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-mortgage-06 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-mortgage (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-mortgage-06 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-mortgage-06 ) );\n  } @else {\n    background-color: var( --scw-color-mortgage-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-mortgage-mixins.box"
     },
     "sizing": {
@@ -18594,8 +18594,8 @@
       "namespace": "state-hover-background-color-savings-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-savings (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-savings-06 ) );\n  } @else {\n    background-color: var( --scw-color-savings-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-savings-06 ) );\n  } @else {\n    background-color: var( --scw-color-savings-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-savings (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-savings-06 ) );\n  } @else {\n    background-color: var( --scw-color-savings-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-savings-06 ) );\n  } @else {\n    background-color: var( --scw-color-savings-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-savings-mixins.box"
     },
     "sizing": {
@@ -18750,8 +18750,8 @@
       "namespace": "state-hover-background-color-student-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-student (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-student-06 ) );\n  } @else {\n    background-color: var( --scw-color-student-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-student-06 ) );\n  } @else {\n    background-color: var( --scw-color-student-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-student (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-student-06 ) );\n  } @else {\n    background-color: var( --scw-color-student-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-student-06 ) );\n  } @else {\n    background-color: var( --scw-color-student-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-student-mixins.box"
     },
     "sizing": {
@@ -18906,8 +18906,8 @@
       "namespace": "state-hover-background-color-credit-cards-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-credit-cards (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-credit-cards-06 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-credit-cards-06 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-credit-cards (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-credit-cards-06 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-credit-cards-06 ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-credit-cards-mixins.box"
     },
     "sizing": {
@@ -19062,8 +19062,8 @@
       "namespace": "state-hover-background-color-investments-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-investments (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-investments-06 ) );\n  } @else {\n    background-color: var( --scw-color-investments-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-investments-06 ) );\n  } @else {\n    background-color: var( --scw-color-investments-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-investments (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-investments-06 ) );\n  } @else {\n    background-color: var( --scw-color-investments-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-investments-06 ) );\n  } @else {\n    background-color: var( --scw-color-investments-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-investments-mixins.box"
     },
     "sizing": {
@@ -19218,8 +19218,8 @@
       "namespace": "state-hover-background-color-checking-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-hover-background-color-checking (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-checking-06 ) );\n  } @else {\n    background-color: var( --scw-color-checking-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-checking-06 ) );\n  } @else {\n    background-color: var( --scw-color-checking-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-icon-state-hover-background-color-checking (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-checking-06 ) );\n  } @else {\n    background-color: var( --scw-color-checking-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-06 , var( --scw-color-checking-06 ) );\n  } @else {\n    background-color: var( --scw-color-checking-06 );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-background-color-checking-mixins.box"
     },
     "sizing": {
@@ -19634,8 +19634,8 @@
       "namespace": "state-focused-color-primary-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-color-primary-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-color-primary-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "state-focused-color-primary-icon-vector-mixins.box"
     },
     "sizing": {
@@ -19790,8 +19790,8 @@
       "namespace": "state-focused-color-mortgage-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-color-mortgage-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-color-mortgage-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  } \n}",
       "outputSegmentRef": "state-focused-color-mortgage-icon-vector-mixins.box"
     },
     "sizing": {
@@ -19946,8 +19946,8 @@
       "namespace": "state-focused-color-savings-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-color-savings-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-color-savings-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  } \n}",
       "outputSegmentRef": "state-focused-color-savings-icon-vector-mixins.box"
     },
     "sizing": {
@@ -20102,8 +20102,8 @@
       "namespace": "state-focused-color-student-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-color-student-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-color-student-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  } \n}",
       "outputSegmentRef": "state-focused-color-student-icon-vector-mixins.box"
     },
     "sizing": {
@@ -20258,8 +20258,8 @@
       "namespace": "state-focused-color-credit-cards-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-color-credit-cards-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-color-credit-cards-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  } \n}",
       "outputSegmentRef": "state-focused-color-credit-cards-icon-vector-mixins.box"
     },
     "sizing": {
@@ -20414,8 +20414,8 @@
       "namespace": "state-focused-color-investments-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-color-investments-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-color-investments-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  } \n}",
       "outputSegmentRef": "state-focused-color-investments-icon-vector-mixins.box"
     },
     "sizing": {
@@ -20570,8 +20570,8 @@
       "namespace": "state-focused-color-checking-icon-vector-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-color-checking-icon-vector (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-color-checking-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  } \n}",
       "outputSegmentRef": "state-focused-color-checking-icon-vector-mixins.box"
     },
     "sizing": {
@@ -20622,8 +20622,8 @@
       "namespace": "state-focused-background-color-primary-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-primary (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-primary (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-primary ) );\n  } @else {\n    background-color: var( --scw-color-primary );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-primary-mixins.box"
     },
     "sizing": {
@@ -20778,8 +20778,8 @@
       "namespace": "state-focused-background-color-information-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-information (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-information (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-information-mixins.box"
     },
     "sizing": {
@@ -20934,8 +20934,8 @@
       "namespace": "state-focused-background-color-warning-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-warning (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-warning-light ) );\n  } @else {\n    background-color: var( --scw-color-warning-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-warning-light ) );\n  } @else {\n    background-color: var( --scw-color-warning-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-warning (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-warning-light ) );\n  } @else {\n    background-color: var( --scw-color-warning-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-warning-light ) );\n  } @else {\n    background-color: var( --scw-color-warning-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-warning-mixins.box"
     },
     "sizing": {
@@ -21090,8 +21090,8 @@
       "namespace": "state-focused-background-color-error-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-error (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-error (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-error-light ) );\n  } @else {\n    background-color: var( --scw-color-error-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-error-mixins.box"
     },
     "sizing": {
@@ -21246,8 +21246,8 @@
       "namespace": "state-focused-background-color-success-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-success (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-success (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-success-mixins.box"
     },
     "sizing": {
@@ -21402,8 +21402,8 @@
       "namespace": "state-focused-background-color-mortgage-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-mortgage (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-mortgage (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-mortgage ) );\n  } @else {\n    background-color: var( --scw-color-mortgage );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-mortgage-mixins.box"
     },
     "sizing": {
@@ -21558,8 +21558,8 @@
       "namespace": "state-focused-background-color-savings-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-savings (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-savings (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-savings ) );\n  } @else {\n    background-color: var( --scw-color-savings );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-savings-mixins.box"
     },
     "sizing": {
@@ -21714,8 +21714,8 @@
       "namespace": "state-focused-background-color-student-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-student (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-student (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-student ) );\n  } @else {\n    background-color: var( --scw-color-student );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-student-mixins.box"
     },
     "sizing": {
@@ -21870,8 +21870,8 @@
       "namespace": "state-focused-background-color-credit-cards-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-credit-cards (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-credit-cards (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-credit-cards ) );\n  } @else {\n    background-color: var( --scw-color-credit-cards );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-credit-cards-mixins.box"
     },
     "sizing": {
@@ -22026,8 +22026,8 @@
       "namespace": "state-focused-background-color-investments-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-investments (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-investments (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-investments ) );\n  } @else {\n    background-color: var( --scw-color-investments );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-investments-mixins.box"
     },
     "sizing": {
@@ -22182,8 +22182,8 @@
       "namespace": "state-focused-background-color-checking-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-icon-state-focused-background-color-checking (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "output": "\n@mixin comp-scw-icon-state-focused-background-color-checking (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , var( --scw-color-checking ) );\n  } @else {\n    background-color: var( --scw-color-checking );\n  }\n  border-radius: 48px 48px 48px 48px;\n  box-shadow: var( --scw-effect-focus-shadow ); \n}",
       "outputSegmentRef": "state-focused-background-color-checking-mixins.box"
     },
     "sizing": {
@@ -25406,8 +25406,8 @@
       "namespace": "default-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-default-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-default-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "default-label-mixins.text"
     },
     "sizing": {
@@ -25505,8 +25505,8 @@
       "namespace": "state-disabled-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-state-disabled-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-state-disabled-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
       "outputSegmentRef": "state-disabled-label-mixins.text"
     },
     "sizing": {
@@ -25604,8 +25604,8 @@
       "namespace": "state-focused-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-state-focused-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-state-focused-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "state-focused-label-mixins.text"
     },
     "sizing": {
@@ -25703,8 +25703,8 @@
       "namespace": "state-hover-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-state-hover-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-state-hover-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-10-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "state-hover-label-mixins.text"
     },
     "sizing": {
@@ -25750,8 +25750,8 @@
       "namespace": "state-hover-underline-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-heading-state-hover-underline (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-state-hover-underline (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "state-hover-underline-mixins.box"
     },
     "sizing": {
@@ -25854,8 +25854,8 @@
       "namespace": "size-h2-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h2-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h2-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "size-h2-label-mixins.text"
     },
     "sizing": {
@@ -25953,8 +25953,8 @@
       "namespace": "size-h2-state-disabled-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h2-state-disabled-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h2-state-disabled-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
       "outputSegmentRef": "size-h2-state-disabled-label-mixins.text"
     },
     "sizing": {
@@ -26052,8 +26052,8 @@
       "namespace": "size-h2-state-hover-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h2-state-hover-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-size-h2-state-hover-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-h2-state-hover-label-mixins.text"
     },
     "sizing": {
@@ -26099,8 +26099,8 @@
       "namespace": "size-h2-state-hover-underline-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-heading-size-h2-state-hover-underline (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-size-h2-state-hover-underline (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-h2-state-hover-underline-mixins.box"
     },
     "sizing": {
@@ -26203,8 +26203,8 @@
       "namespace": "size-h2-state-focused-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h2-state-focused-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h2-state-focused-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-09-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "size-h2-state-focused-label-mixins.text"
     },
     "sizing": {
@@ -26302,8 +26302,8 @@
       "namespace": "size-h3-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h3-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h3-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "size-h3-label-mixins.text"
     },
     "sizing": {
@@ -26401,8 +26401,8 @@
       "namespace": "size-h3-state-hover-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h3-state-hover-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-size-h3-state-hover-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-h3-state-hover-label-mixins.text"
     },
     "sizing": {
@@ -26448,8 +26448,8 @@
       "namespace": "size-h3-state-hover-underline-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-heading-size-h3-state-hover-underline (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-size-h3-state-hover-underline (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-h3-state-hover-underline-mixins.box"
     },
     "sizing": {
@@ -26552,8 +26552,8 @@
       "namespace": "size-h3-state-focused-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h3-state-focused-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h3-state-focused-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "size-h3-state-focused-label-mixins.text"
     },
     "sizing": {
@@ -26651,8 +26651,8 @@
       "namespace": "size-h3-state-disabled-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h3-state-disabled-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h3-state-disabled-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-08-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
       "outputSegmentRef": "size-h3-state-disabled-label-mixins.text"
     },
     "sizing": {
@@ -26750,8 +26750,8 @@
       "namespace": "size-h4-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h4-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h4-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "size-h4-label-mixins.text"
     },
     "sizing": {
@@ -26849,8 +26849,8 @@
       "namespace": "size-h4-state-hover-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h4-state-hover-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-size-h4-state-hover-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-h4-state-hover-label-mixins.text"
     },
     "sizing": {
@@ -26896,8 +26896,8 @@
       "namespace": "size-h4-state-hover-underline-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-heading-size-h4-state-hover-underline (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-size-h4-state-hover-underline (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-h4-state-hover-underline-mixins.box"
     },
     "sizing": {
@@ -27000,8 +27000,8 @@
       "namespace": "size-h4-state-focused-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h4-state-focused-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h4-state-focused-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "size-h4-state-focused-label-mixins.text"
     },
     "sizing": {
@@ -27099,8 +27099,8 @@
       "namespace": "size-h4-state-disabled-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h4-state-disabled-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h4-state-disabled-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-07-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
       "outputSegmentRef": "size-h4-state-disabled-label-mixins.text"
     },
     "sizing": {
@@ -27198,8 +27198,8 @@
       "namespace": "size-h5-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h5-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h5-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "size-h5-label-mixins.text"
     },
     "sizing": {
@@ -27297,8 +27297,8 @@
       "namespace": "size-h5-state-hover-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h5-state-hover-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-size-h5-state-hover-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-h5-state-hover-label-mixins.text"
     },
     "sizing": {
@@ -27344,8 +27344,8 @@
       "namespace": "size-h5-state-hover-underline-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-heading-size-h5-state-hover-underline (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-heading-size-h5-state-hover-underline (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    background-color: var( --scw-color-primary-04 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "size-h5-state-hover-underline-mixins.box"
     },
     "sizing": {
@@ -27448,8 +27448,8 @@
       "namespace": "size-h5-state-focused-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h5-state-focused-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h5-state-focused-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-04 , var( --scw-color-primary-04 ) );\n  } @else {\n    color: var( --scw-color-primary-04 );\n  } \n}",
       "outputSegmentRef": "size-h5-state-focused-label-mixins.text"
     },
     "sizing": {
@@ -27547,8 +27547,8 @@
       "namespace": "size-h5-state-disabled-label-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-heading-size-h5-state-disabled-label (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "output": "\n@mixin comp-scw-heading-size-h5-state-disabled-label (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-bold-condensed-06-font );\n  @if $themeVar {\n    color: var( #{$themeVar}-08 , var( --scw-color-primary-08 ) );\n  } @else {\n    color: var( --scw-color-primary-08 );\n  } \n}",
       "outputSegmentRef": "size-h5-state-disabled-label-mixins.text"
     },
     "sizing": {
@@ -27698,8 +27698,8 @@
       "namespace": "default-icon-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-default-icon (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-default-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "default-icon-mixins.box"
     },
     "sizing": {
@@ -27896,8 +27896,8 @@
       "namespace": "state-hover-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-state-hover (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-primary-095 ) );\n  } @else {\n    background-color: var( --scw-color-primary-095 );\n  }\n  border-radius: 4px 4px 4px 4px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-primary-095 ) );\n  } @else {\n    background-color: var( --scw-color-primary-095 );\n  }\n  border-radius: 4px 4px 4px 4px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-state-hover (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-primary-095 ) );\n  } @else {\n    background-color: var( --scw-color-primary-095 );\n  }\n  border-radius: 4px 4px 4px 4px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-primary-095 ) );\n  } @else {\n    background-color: var( --scw-color-primary-095 );\n  }\n  border-radius: 4px 4px 4px 4px; \n}",
       "outputSegmentRef": "state-hover-mixins.box"
     },
     "sizing": {
@@ -27948,8 +27948,8 @@
       "namespace": "state-hover-icon-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-state-hover-icon (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-state-hover-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-hover-icon-mixins.box"
     },
     "sizing": {
@@ -28198,8 +28198,8 @@
       "namespace": "state-focused-icon-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-state-focused-icon (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-state-focused-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-focused-icon-mixins.box"
     },
     "sizing": {
@@ -28448,8 +28448,8 @@
       "namespace": "type-warning-icon-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-type-warning-icon (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-type-warning-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "type-warning-icon-mixins.box"
     },
     "sizing": {
@@ -28698,8 +28698,8 @@
       "namespace": "type-warning-state-disabled-icon-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-type-warning-state-disabled-icon (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-type-warning-state-disabled-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "type-warning-state-disabled-icon-mixins.box"
     },
     "sizing": {
@@ -28896,8 +28896,8 @@
       "namespace": "type-warning-state-hover-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-type-warning-state-hover (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-primary-095 ) );\n  } @else {\n    background-color: var( --scw-color-primary-095 );\n  }\n  border-radius: 4px 4px 4px 4px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-primary-095 ) );\n  } @else {\n    background-color: var( --scw-color-primary-095 );\n  }\n  border-radius: 4px 4px 4px 4px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-type-warning-state-hover (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-primary-095 ) );\n  } @else {\n    background-color: var( --scw-color-primary-095 );\n  }\n  border-radius: 4px 4px 4px 4px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-primary-095 ) );\n  } @else {\n    background-color: var( --scw-color-primary-095 );\n  }\n  border-radius: 4px 4px 4px 4px; \n}",
       "outputSegmentRef": "type-warning-state-hover-mixins.box"
     },
     "sizing": {
@@ -28948,8 +28948,8 @@
       "namespace": "type-warning-state-hover-icon-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-type-warning-state-hover-icon (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-type-warning-state-hover-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "type-warning-state-hover-icon-mixins.box"
     },
     "sizing": {
@@ -29198,8 +29198,8 @@
       "namespace": "type-warning-state-focused-icon-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-type-warning-state-focused-icon (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-type-warning-state-focused-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-information-light ) );\n  } @else {\n    background-color: var( --scw-color-information-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "type-warning-state-focused-icon-mixins.box"
     },
     "sizing": {
@@ -29448,8 +29448,8 @@
       "namespace": "state-disabled-icon-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-page-alert-state-disabled-icon (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "output": "\n@mixin comp-scw-page-alert-state-disabled-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-light , var( --scw-color-success-light ) );\n  } @else {\n    background-color: var( --scw-color-success-light );\n  }\n  border-radius: 48px 48px 48px 48px; \n}",
       "outputSegmentRef": "state-disabled-icon-mixins.box"
     },
     "sizing": {
@@ -32194,8 +32194,8 @@
       "namespace": "index-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch;\n  flex: 1; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch;\n  flex: 1; \n}",
+      "output": "\n@mixin comp-scw-single-input-field (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch;\n  flex: 1; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 2px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch;\n  flex: 1; \n}",
       "outputSegmentRef": "index-mixins.box"
     },
     "sizing": {
@@ -32506,8 +32506,8 @@
       "namespace": "right-action-edit-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-right-action-edit (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-right-action-edit (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
       "outputSegmentRef": "right-action-edit-mixins.box"
     },
     "sizing": {
@@ -32662,8 +32662,8 @@
       "namespace": "default-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-bg-default (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-bg-default (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "default-mixins.box"
     },
     "sizing": {
@@ -32766,8 +32766,8 @@
       "namespace": "invalid-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-bg-invalid (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , var( --scw-color-error ) );\n  } @else {\n    border-color: var( --scw-color-error );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , var( --scw-color-error ) );\n  } @else {\n    border-color: var( --scw-color-error );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-bg-invalid (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , var( --scw-color-error ) );\n  } @else {\n    border-color: var( --scw-color-error );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , var( --scw-color-error ) );\n  } @else {\n    border-color: var( --scw-color-error );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "invalid-mixins.box"
     },
     "sizing": {
@@ -32818,8 +32818,8 @@
       "namespace": "focused-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-bg-focused (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow );\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow );\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-bg-focused (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow );\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  }\n  box-shadow: var( --scw-effect-focus-shadow );\n  align-self: stretch; \n}",
       "outputSegmentRef": "focused-mixins.box"
     },
     "sizing": {
@@ -32974,8 +32974,8 @@
       "namespace": "default-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-default-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-default-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "default-bg-mixins.box"
     },
     "sizing": {
@@ -33182,8 +33182,8 @@
       "namespace": "right-icon-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-right-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-right-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "right-icon-bg-mixins.box"
     },
     "sizing": {
@@ -33442,8 +33442,8 @@
       "namespace": "right-icon-right-icon-2-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-right-icon-right-icon-2-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-right-icon-right-icon-2-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "right-icon-right-icon-2-bg-mixins.box"
     },
     "sizing": {
@@ -33754,8 +33754,8 @@
       "namespace": "left-icon-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "left-icon-bg-mixins.box"
     },
     "sizing": {
@@ -34066,8 +34066,8 @@
       "namespace": "left-icon-right-icon-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "left-icon-right-icon-bg-mixins.box"
     },
     "sizing": {
@@ -34430,8 +34430,8 @@
       "namespace": "left-icon-right-icon-right-icon-2-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-icon-right-icon-2-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-icon-right-icon-2-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "left-icon-right-icon-right-icon-2-bg-mixins.box"
     },
     "sizing": {
@@ -34846,8 +34846,8 @@
       "namespace": "right-action-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "right-action-bg-mixins.box"
     },
     "sizing": {
@@ -35002,8 +35002,8 @@
       "namespace": "right-action-content-right-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-content-right-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-content-right-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
       "outputSegmentRef": "right-action-content-right-action-mixins.box"
     },
     "sizing": {
@@ -35106,8 +35106,8 @@
       "namespace": "right-action-right-icon-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-right-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-right-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "right-action-right-icon-bg-mixins.box"
     },
     "sizing": {
@@ -35314,8 +35314,8 @@
       "namespace": "right-action-right-icon-content-right-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-right-icon-content-right-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-right-icon-content-right-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
       "outputSegmentRef": "right-action-right-icon-content-right-action-mixins.box"
     },
     "sizing": {
@@ -35418,8 +35418,8 @@
       "namespace": "right-action-right-icon-right-icon-2-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-right-icon-right-icon-2-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-right-icon-right-icon-2-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "right-action-right-icon-right-icon-2-bg-mixins.box"
     },
     "sizing": {
@@ -35678,8 +35678,8 @@
       "namespace": "right-action-right-icon-right-icon-2-content-right-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-right-icon-right-icon-2-content-right-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-right-action-right-icon-right-icon-2-content-right-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
       "outputSegmentRef": "right-action-right-icon-right-icon-2-content-right-action-mixins.box"
     },
     "sizing": {
@@ -35782,8 +35782,8 @@
       "namespace": "left-icon-right-action-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "left-icon-right-action-bg-mixins.box"
     },
     "sizing": {
@@ -36042,8 +36042,8 @@
       "namespace": "left-icon-right-action-content-right-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-content-right-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-content-right-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
       "outputSegmentRef": "left-icon-right-action-content-right-action-mixins.box"
     },
     "sizing": {
@@ -36146,8 +36146,8 @@
       "namespace": "left-icon-right-action-right-icon-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-right-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-right-icon-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "left-icon-right-action-right-icon-bg-mixins.box"
     },
     "sizing": {
@@ -36458,8 +36458,8 @@
       "namespace": "left-icon-right-action-right-icon-content-right-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-right-icon-content-right-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-right-icon-content-right-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
       "outputSegmentRef": "left-icon-right-action-right-icon-content-right-action-mixins.box"
     },
     "sizing": {
@@ -36562,8 +36562,8 @@
       "namespace": "left-icon-right-action-right-icon-right-icon-2-bg-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-right-icon-right-icon-2-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-right-icon-right-icon-2-bg (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );\n  } @else {\n    background-color: var( --scw-color-grey-10 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    border-color: var( --scw-color-primary-03 );\n  } \n}",
       "outputSegmentRef": "left-icon-right-action-right-icon-right-icon-2-bg-mixins.box"
     },
     "sizing": {
@@ -36926,8 +36926,8 @@
       "namespace": "left-icon-right-action-right-icon-right-icon-2-content-right-action-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-right-icon-right-icon-2-content-right-action (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-single-input-field-v2-left-icon-right-action-right-icon-right-icon-2-content-right-action (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px;\n  align-self: stretch; \n}",
       "outputSegmentRef": "left-icon-right-action-right-icon-right-icon-2-content-right-action-mixins.box"
     },
     "sizing": {
@@ -37966,8 +37966,8 @@
       "namespace": "invalid-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-field-bg-invalid (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-grey-095 ) );\n  } @else {\n    background-color: var( --scw-color-grey-095 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , var( --scw-color-error ) );\n  } @else {\n    border-color: var( --scw-color-error );\n  }\n  align-self: stretch; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: '--scw-color'\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-grey-095 ) );\n  } @else {\n    background-color: var( --scw-color-grey-095 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , var( --scw-color-error ) );\n  } @else {\n    border-color: var( --scw-color-error );\n  }\n  align-self: stretch; \n}",
+      "output": "\n@mixin comp-scw-input-field-bg-invalid (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-grey-095 ) );\n  } @else {\n    background-color: var( --scw-color-grey-095 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , var( --scw-color-error ) );\n  } @else {\n    border-color: var( --scw-color-error );\n  }\n  align-self: stretch; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-095 , var( --scw-color-grey-095 ) );\n  } @else {\n    background-color: var( --scw-color-grey-095 );\n  }\n  border-radius: 6px 6px 6px 6px;\n  border-width: 1px;\n  border-style: solid;\n  @if $borderThemeVar {\n    border-color: var( #{$borderThemeVar} , var( --scw-color-error ) );\n  } @else {\n    border-color: var( --scw-color-error );\n  }\n  align-self: stretch; \n}",
       "outputSegmentRef": "invalid-mixins.box"
     },
     "sizing": {
@@ -38877,8 +38877,8 @@
       "namespace": "default-scw-input-feedback-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-input-feedback-base-default-scw-input-feedback (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-04-font );\n  @if $themeVar {\n    color: var( #{$themeVar} , var( --scw-color-error ) );\n  } @else {\n    color: var( --scw-color-error );\n  } \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-04-font );\n  @if $themeVar {\n    color: var( #{$themeVar} , var( --scw-color-error ) );\n  } @else {\n    color: var( --scw-color-error );\n  } \n}",
+      "output": "\n@mixin comp-scw-input-feedback-base-default-scw-input-feedback (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-04-font );\n  @if $themeVar {\n    color: var( #{$themeVar} , var( --scw-color-error ) );\n  } @else {\n    color: var( --scw-color-error );\n  } \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: var( --scw-type-text-04-font );\n  @if $themeVar {\n    color: var( #{$themeVar} , var( --scw-color-error ) );\n  } @else {\n    color: var( --scw-color-error );\n  } \n}",
       "outputSegmentRef": "default-scw-input-feedback-mixins.text"
     },
     "sizing": {
@@ -39075,8 +39075,8 @@
       "namespace": "default-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-right-action-default (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
+      "output": "\n@mixin comp-scw-input-right-action-default (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
       "outputSegmentRef": "default-mixins.box"
     },
     "sizing": {
@@ -39179,8 +39179,8 @@
       "namespace": "text-mixins"
     },
     "box": {
-      "output": "\n@mixin comp-scw-input-right-action-text (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
-      "outputSegment": "\n@mixin box (\n  $bgThemeVar: '--scw-color', \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
+      "output": "\n@mixin comp-scw-input-right-action-text (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
+      "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );\n  } @else {\n    background-color: var( --scw-color-primary-03 );\n  }\n  border-radius: 0px 4px 4px 0px; \n}",
       "outputSegmentRef": "text-mixins.box"
     },
     "sizing": {
@@ -40174,8 +40174,8 @@
       "namespace": "size-link-text-mixins"
     },
     "text": {
-      "output": "\n@mixin comp-scw-rich-text-size-link-text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: 400 1.125rem/1.688rem 'Proxima Nova';\n  @if $themeVar {\n    color: var( #{$themeVar} , var( --scw-color-primary ) );\n  } @else {\n    color: var( --scw-color-primary );\n  }\n  flex: 1; \n}",
-      "outputSegment": "\n@mixin text (\n  $themeVar: '--scw-color'\n) { \n  text-align: LEFT;\n  font: 400 1.125rem/1.688rem 'Proxima Nova';\n  @if $themeVar {\n    color: var( #{$themeVar} , var( --scw-color-primary ) );\n  } @else {\n    color: var( --scw-color-primary );\n  }\n  flex: 1; \n}",
+      "output": "\n@mixin comp-scw-rich-text-size-link-text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: 400 1.125rem/1.688rem 'Proxima Nova';\n  @if $themeVar {\n    color: var( #{$themeVar} , var( --scw-color-primary ) );\n  } @else {\n    color: var( --scw-color-primary );\n  }\n  flex: 1; \n}",
+      "outputSegment": "\n@mixin text (\n  $themeVar: false\n) { \n  text-align: LEFT;\n  font: 400 1.125rem/1.688rem 'Proxima Nova';\n  @if $themeVar {\n    color: var( #{$themeVar} , var( --scw-color-primary ) );\n  } @else {\n    color: var( --scw-color-primary );\n  }\n  flex: 1; \n}",
       "outputSegmentRef": "size-link-text-mixins.text"
     },
     "sizing": {