scu-web-components 0.0.94 → 0.0.95

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-.json

@@ -10,8 +10,8 @@
     "outputSegmentRef": "state-focus-style-button-mixins.box"
   },
   "sizing": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--sizing {\n  width: 140px;\n  height: 87px;\n}",
-    "outputSegment": "\n@mixin sizing {\n  width: 140px;\n  height: 87px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--sizing {\n  width: 140px;\n  height: 137px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 140px;\n  height: 137px;\n}",
     "outputSegmentRef": "state-focus-style-button-mixins.sizing"
   },
   "width": {
@@ -20,8 +20,8 @@
     "outputSegmentRef": "state-focus-style-button-mixins.width"
   },
   "height": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--height {\n  height: 87px;\n}",
-    "outputSegment": "\n@mixin height {\n  height: 87px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--height {\n  height: 137px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 137px;\n}",
     "outputSegmentRef": "state-focus-style-button-mixins.height"
   },
   "padding": {
@@ -35,18 +35,18 @@
     "outputSegmentRef": "state-focus-style-button-mixins.figma-autolayout"
   },
   "absolute-layout": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 21.8 );\n  width: 140px;\n  top: calc( var( --scw-spacing-1 ) * 31.1 );\n  height: 87px; \n}",
-    "outputSegment": "\n@mixin absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 21.8 );\n  width: 140px;\n  top: calc( var( --scw-spacing-1 ) * 31.1 );\n  height: 87px; \n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 53.1 );\n  width: 140px;\n  top: calc( var( --scw-spacing-1 ) * 48.3134765625 );\n  height: 137px; \n}",
+    "outputSegment": "\n@mixin absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 53.1 );\n  width: 140px;\n  top: calc( var( --scw-spacing-1 ) * 48.3134765625 );\n  height: 137px; \n}",
     "outputSegmentRef": "state-focus-style-button-mixins.absolute-layout"
   },
   "html-autolayout-margins": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 21.8 );\n  margin-right: calc( var( --scw-spacing-1 ) * 38.3 );\n  margin-top: calc( var( --scw-spacing-1 ) * 31.1 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 2.8 );\n}",
-    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 21.8 );\n  margin-right: calc( var( --scw-spacing-1 ) * 38.3 );\n  margin-top: calc( var( --scw-spacing-1 ) * 31.1 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 2.8 );\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 53.1 );\n  margin-right: calc( var( --scw-spacing-1 ) * 17.9 );\n  margin-top: calc( var( --scw-spacing-1 ) * 48.3134765625 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 3.6865234375 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 53.1 );\n  margin-right: calc( var( --scw-spacing-1 ) * 17.9 );\n  margin-top: calc( var( --scw-spacing-1 ) * 48.3134765625 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 3.6865234375 );\n}",
     "outputSegmentRef": "state-focus-style-button-mixins.html-autolayout-margins"
   },
   "html-autolayout-padding": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 21.8 );\n  padding-right: calc( var( --scw-spacing-1 ) * 38.3 );\n  padding-top: calc( var( --scw-spacing-1 ) * 31.1 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 2.8 );\n}",
-    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 21.8 );\n  padding-right: calc( var( --scw-spacing-1 ) * 38.3 );\n  padding-top: calc( var( --scw-spacing-1 ) * 31.1 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 2.8 );\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button--html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 53.1 );\n  padding-right: calc( var( --scw-spacing-1 ) * 17.9 );\n  padding-top: calc( var( --scw-spacing-1 ) * 48.3134765625 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 3.6865234375 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 53.1 );\n  padding-right: calc( var( --scw-spacing-1 ) * 17.9 );\n  padding-top: calc( var( --scw-spacing-1 ) * 48.3134765625 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 3.6865234375 );\n}",
     "outputSegmentRef": "state-focus-style-button-mixins.html-autolayout-padding"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-container-.json

@@ -10,8 +10,8 @@
     "outputSegmentRef": "state-focus-style-button-container-mixins.box"
   },
   "sizing": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container--sizing {\n  width: 120px;\n  height: 47px;\n}",
-    "outputSegment": "\n@mixin sizing {\n  width: 120px;\n  height: 47px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container--sizing {\n  width: 120px;\n  height: 97px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 120px;\n  height: 97px;\n}",
     "outputSegmentRef": "state-focus-style-button-container-mixins.sizing"
   },
   "width": {
@@ -20,8 +20,8 @@
     "outputSegmentRef": "state-focus-style-button-container-mixins.width"
   },
   "height": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container--height {\n  height: 47px;\n}",
-    "outputSegment": "\n@mixin height {\n  height: 47px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container--height {\n  height: 97px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 97px;\n}",
     "outputSegmentRef": "state-focus-style-button-container-mixins.height"
   },
   "padding": {
@@ -30,8 +30,8 @@
     "outputSegmentRef": "state-focus-style-button-container-mixins.padding"
   },
   "figma-autolayout": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  & > *:not(:last-child) { \n        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n      } \n}",
-    "outputSegment": "\n@mixin figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  & > *:not(:last-child) { \n        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n      } \n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container--figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  & > *:not(:last-child) { \n        margin-bottom: 0px; \n        --margin-bottom: 0px; \n      } \n}",
+    "outputSegment": "\n@mixin figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  & > *:not(:last-child) { \n        margin-bottom: 0px; \n        --margin-bottom: 0px; \n      } \n}",
     "outputSegmentRef": "state-focus-style-button-container-mixins.figma-autolayout"
   },
   "absolute-layout": {

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-container-label-.json

@@ -30,8 +30,8 @@
     "outputSegmentRef": "state-focus-style-button-container-label-mixins.padding"
   },
   "figma-autolayout": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-label--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );\n  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );\n  padding-top: var( --scw-spacing-1 );\n  padding-bottom: var( --scw-spacing-1 );\n  & > *:not(:last-child) { \n        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n      } \n}",
-    "outputSegment": "\n@mixin figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );\n  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );\n  padding-top: var( --scw-spacing-1 );\n  padding-bottom: var( --scw-spacing-1 );\n  & > *:not(:last-child) { \n        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n      } \n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-label--figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );\n  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );\n  padding-top: var( --scw-spacing-1 );\n  padding-bottom: var( --scw-spacing-1 );\n  & > *:not(:last-child) { \n        margin-bottom: calc( var( --scw-spacing-1 ) * 0.4 ); \n        --margin-bottom: calc( var( --scw-spacing-1 ) * 0.4 ); \n      } \n}",
+    "outputSegment": "\n@mixin figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );\n  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );\n  padding-top: var( --scw-spacing-1 );\n  padding-bottom: var( --scw-spacing-1 );\n  & > *:not(:last-child) { \n        margin-bottom: calc( var( --scw-spacing-1 ) * 0.4 ); \n        --margin-bottom: calc( var( --scw-spacing-1 ) * 0.4 ); \n      } \n}",
     "outputSegmentRef": "state-focus-style-button-container-label-mixins.figma-autolayout"
   },
   "absolute-layout": {
@@ -40,13 +40,13 @@
     "outputSegmentRef": "state-focus-style-button-container-label-mixins.absolute-layout"
   },
   "html-autolayout-margins": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-label--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n}",
-    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-label--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: var( --scw-spacing-5 );\n  margin-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: var( --scw-spacing-5 );\n  margin-bottom: 0px;\n}",
     "outputSegmentRef": "state-focus-style-button-container-label-mixins.html-autolayout-margins"
   },
   "html-autolayout-padding": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-label--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
-    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-label--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: var( --scw-spacing-5 );\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: var( --scw-spacing-5 );\n  padding-bottom: 0px;\n}",
     "outputSegmentRef": "state-focus-style-button-container-label-mixins.html-autolayout-padding"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-.json

@@ -0,0 +1,52 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-mixins",
+    "namespace": "state-focus-style-button-container-scw-icon-mixins"
+  },
+  "box": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  } \n}",
+    "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  } \n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-mixins.box"
+  },
+  "sizing": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon--sizing {\n  width: 50px;\n  height: 50px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 50px;\n  height: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-mixins.sizing"
+  },
+  "width": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon--width {\n  width: 50px;\n}",
+    "outputSegment": "\n@mixin width {\n  width: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-mixins.width"
+  },
+  "height": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon--height {\n  height: 50px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-mixins.height"
+  },
+  "padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon--padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-mixins.padding"
+  },
+  "figma-autolayout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon--figma-autolayout { \n   \n}",
+    "outputSegment": "\n@mixin figma-autolayout { \n   \n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-mixins.figma-autolayout"
+  },
+  "absolute-layout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon--absolute-layout {\n   \n}",
+    "outputSegment": "\n@mixin absolute-layout {\n   \n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-mixins.absolute-layout"
+  },
+  "html-autolayout-margins": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon--html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 3.5 );\n  margin-right: calc( var( --scw-spacing-1 ) * 3.5 );\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 4.7 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 3.5 );\n  margin-right: calc( var( --scw-spacing-1 ) * 3.5 );\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 4.7 );\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-mixins.html-autolayout-margins"
+  },
+  "html-autolayout-padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon--html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 3.5 );\n  padding-right: calc( var( --scw-spacing-1 ) * 3.5 );\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 4.7 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 3.5 );\n  padding-right: calc( var( --scw-spacing-1 ) * 3.5 );\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 4.7 );\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-mixins.html-autolayout-padding"
+  }
+}

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-.json

@@ -0,0 +1,52 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-mixins",
+    "namespace": "state-focus-style-button-container-scw-icon-icon-mixins"
+  },
+  "box": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  } \n}",
+    "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  } \n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-mixins.box"
+  },
+  "sizing": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon--sizing {\n  width: 50px;\n  height: 50px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 50px;\n  height: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-mixins.sizing"
+  },
+  "width": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon--width {\n  width: 50px;\n}",
+    "outputSegment": "\n@mixin width {\n  width: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-mixins.width"
+  },
+  "height": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon--height {\n  height: 50px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-mixins.height"
+  },
+  "padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon--padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-mixins.padding"
+  },
+  "figma-autolayout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon--figma-autolayout { \n   \n}",
+    "outputSegment": "\n@mixin figma-autolayout { \n   \n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-mixins.figma-autolayout"
+  },
+  "absolute-layout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon--absolute-layout {\n  position: absolute;\n  left: 0px;\n  right: 0px;\n  top: 0px;\n  bottom: 0px; \n}",
+    "outputSegment": "\n@mixin absolute-layout {\n  position: absolute;\n  left: 0px;\n  right: 0px;\n  top: 0px;\n  bottom: 0px; \n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-mixins.absolute-layout"
+  },
+  "html-autolayout-margins": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-mixins.html-autolayout-margins"
+  },
+  "html-autolayout-padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-mixins.html-autolayout-padding"
+  }
+}

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector-.json

@@ -0,0 +1,52 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-focus-style-button-container-scw-icon-icon-vector-mixins",
+    "namespace": "state-focus-style-button-container-scw-icon-icon-vector-mixins"
+  },
+  "box": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );\n  } @else {\n    background-color: var( --scw-color-grey-02 );\n  } \n}",
+    "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );\n  } @else {\n    background-color: var( --scw-color-grey-02 );\n  } \n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-vector-mixins.box"
+  },
+  "sizing": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector--sizing {\n  width: 44.6429px;\n  height: 39.5416px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 44.6429px;\n  height: 39.5416px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-vector-mixins.sizing"
+  },
+  "width": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector--width {\n  width: 44.6429px;\n}",
+    "outputSegment": "\n@mixin width {\n  width: 44.6429px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-vector-mixins.width"
+  },
+  "height": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector--height {\n  height: 39.5416px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 39.5416px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-vector-mixins.height"
+  },
+  "padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector--padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-vector-mixins.padding"
+  },
+  "figma-autolayout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector--figma-autolayout { \n   \n}",
+    "outputSegment": "\n@mixin figma-autolayout { \n   \n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-vector-mixins.figma-autolayout"
+  },
+  "absolute-layout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector--absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 ); \n}",
+    "outputSegment": "\n@mixin absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 ); \n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-vector-mixins.absolute-layout"
+  },
+  "html-autolayout-margins": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector--html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  margin-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  margin-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  margin-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  margin-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-vector-mixins.html-autolayout-margins"
+  },
+  "html-autolayout-padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-container-scw-icon-icon-vector--html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  padding-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  padding-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  padding-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  padding-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );\n}",
+    "outputSegmentRef": "state-focus-style-button-container-scw-icon-icon-vector-mixins.html-autolayout-padding"
+  }
+}

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-size-small-.json

@@ -10,8 +10,8 @@
     "outputSegmentRef": "state-focus-style-button-size-small-mixins.box"
   },
   "sizing": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--sizing {\n  width: 108px;\n  height: 79px;\n}",
-    "outputSegment": "\n@mixin sizing {\n  width: 108px;\n  height: 79px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--sizing {\n  width: 108px;\n  height: 129px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 108px;\n  height: 129px;\n}",
     "outputSegmentRef": "state-focus-style-button-size-small-mixins.sizing"
   },
   "width": {
@@ -20,8 +20,8 @@
     "outputSegmentRef": "state-focus-style-button-size-small-mixins.width"
   },
   "height": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--height {\n  height: 79px;\n}",
-    "outputSegment": "\n@mixin height {\n  height: 79px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--height {\n  height: 129px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 129px;\n}",
     "outputSegmentRef": "state-focus-style-button-size-small-mixins.height"
   },
   "padding": {
@@ -35,18 +35,18 @@
     "outputSegmentRef": "state-focus-style-button-size-small-mixins.figma-autolayout"
   },
   "absolute-layout": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 59.4 );\n  width: 108px;\n  top: calc( var( --scw-spacing-1 ) * 31.5 );\n  height: 79px; \n}",
-    "outputSegment": "\n@mixin absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 59.4 );\n  width: 108px;\n  top: calc( var( --scw-spacing-1 ) * 31.5 );\n  height: 79px; \n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 68.7 );\n  width: 108px;\n  top: calc( var( --scw-spacing-1 ) * 49.1134765625 );\n  height: 129px; \n}",
+    "outputSegment": "\n@mixin absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 68.7 );\n  width: 108px;\n  top: calc( var( --scw-spacing-1 ) * 49.1134765625 );\n  height: 129px; \n}",
     "outputSegmentRef": "state-focus-style-button-size-small-mixins.absolute-layout"
   },
   "html-autolayout-margins": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 59.4 );\n  margin-right: calc( var( --scw-spacing-1 ) * 3.9 );\n  margin-top: calc( var( --scw-spacing-1 ) * 31.5 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 3.2 );\n}",
-    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 59.4 );\n  margin-right: calc( var( --scw-spacing-1 ) * 3.9 );\n  margin-top: calc( var( --scw-spacing-1 ) * 31.5 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 3.2 );\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 68.7 );\n  margin-right: calc( var( --scw-spacing-1 ) * 5.5 );\n  margin-top: calc( var( --scw-spacing-1 ) * 49.1134765625 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 3.6865234375 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 68.7 );\n  margin-right: calc( var( --scw-spacing-1 ) * 5.5 );\n  margin-top: calc( var( --scw-spacing-1 ) * 49.1134765625 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 3.6865234375 );\n}",
     "outputSegmentRef": "state-focus-style-button-size-small-mixins.html-autolayout-margins"
   },
   "html-autolayout-padding": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 59.4 );\n  padding-right: calc( var( --scw-spacing-1 ) * 3.9 );\n  padding-top: calc( var( --scw-spacing-1 ) * 31.5 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 3.2 );\n}",
-    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 59.4 );\n  padding-right: calc( var( --scw-spacing-1 ) * 3.9 );\n  padding-top: calc( var( --scw-spacing-1 ) * 31.5 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 3.2 );\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small--html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 68.7 );\n  padding-right: calc( var( --scw-spacing-1 ) * 5.5 );\n  padding-top: calc( var( --scw-spacing-1 ) * 49.1134765625 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 3.6865234375 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 68.7 );\n  padding-right: calc( var( --scw-spacing-1 ) * 5.5 );\n  padding-top: calc( var( --scw-spacing-1 ) * 49.1134765625 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 3.6865234375 );\n}",
     "outputSegmentRef": "state-focus-style-button-size-small-mixins.html-autolayout-padding"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-size-small-container-.json

@@ -10,8 +10,8 @@
     "outputSegmentRef": "state-focus-style-button-size-small-container-mixins.box"
   },
   "sizing": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container--sizing {\n  width: 98px;\n  height: 39px;\n}",
-    "outputSegment": "\n@mixin sizing {\n  width: 98px;\n  height: 39px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container--sizing {\n  width: 98px;\n  height: 89px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 98px;\n  height: 89px;\n}",
     "outputSegmentRef": "state-focus-style-button-size-small-container-mixins.sizing"
   },
   "width": {
@@ -20,8 +20,8 @@
     "outputSegmentRef": "state-focus-style-button-size-small-container-mixins.width"
   },
   "height": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container--height {\n  height: 39px;\n}",
-    "outputSegment": "\n@mixin height {\n  height: 39px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container--height {\n  height: 89px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 89px;\n}",
     "outputSegmentRef": "state-focus-style-button-size-small-container-mixins.height"
   },
   "padding": {
@@ -30,8 +30,8 @@
     "outputSegmentRef": "state-focus-style-button-size-small-container-mixins.padding"
   },
   "figma-autolayout": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  & > *:not(:last-child) { \n        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n      } \n}",
-    "outputSegment": "\n@mixin figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  & > *:not(:last-child) { \n        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); \n      } \n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container--figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  & > *:not(:last-child) { \n        margin-bottom: 0px; \n        --margin-bottom: 0px; \n      } \n}",
+    "outputSegment": "\n@mixin figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  justify-content: center;\n  align-items: center;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n  & > *:not(:last-child) { \n        margin-bottom: 0px; \n        --margin-bottom: 0px; \n      } \n}",
     "outputSegmentRef": "state-focus-style-button-size-small-container-mixins.figma-autolayout"
   },
   "absolute-layout": {

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-size-small-container-label-.json

@@ -40,13 +40,13 @@
     "outputSegmentRef": "state-focus-style-button-size-small-container-label-mixins.absolute-layout"
   },
   "html-autolayout-margins": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-label--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n}",
-    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-label--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: var( --scw-spacing-5 );\n  margin-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: var( --scw-spacing-5 );\n  margin-bottom: 0px;\n}",
     "outputSegmentRef": "state-focus-style-button-size-small-container-label-mixins.html-autolayout-margins"
   },
   "html-autolayout-padding": {
-    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-label--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
-    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-label--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: var( --scw-spacing-5 );\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: var( --scw-spacing-5 );\n  padding-bottom: 0px;\n}",
     "outputSegmentRef": "state-focus-style-button-size-small-container-label-mixins.html-autolayout-padding"
   }
 }

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-.json

@@ -0,0 +1,52 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-mixins",
+    "namespace": "state-focus-style-button-size-small-container-scw-icon-mixins"
+  },
+  "box": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  } \n}",
+    "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  } \n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-mixins.box"
+  },
+  "sizing": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon--sizing {\n  width: 50px;\n  height: 50px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 50px;\n  height: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-mixins.sizing"
+  },
+  "width": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon--width {\n  width: 50px;\n}",
+    "outputSegment": "\n@mixin width {\n  width: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-mixins.width"
+  },
+  "height": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon--height {\n  height: 50px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-mixins.height"
+  },
+  "padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon--padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-mixins.padding"
+  },
+  "figma-autolayout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon--figma-autolayout { \n   \n}",
+    "outputSegment": "\n@mixin figma-autolayout { \n   \n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-mixins.figma-autolayout"
+  },
+  "absolute-layout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon--absolute-layout {\n   \n}",
+    "outputSegment": "\n@mixin absolute-layout {\n   \n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-mixins.absolute-layout"
+  },
+  "html-autolayout-margins": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon--html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 2.4 );\n  margin-right: calc( var( --scw-spacing-1 ) * 2.4 );\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 3.9 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 2.4 );\n  margin-right: calc( var( --scw-spacing-1 ) * 2.4 );\n  margin-top: 0px;\n  margin-bottom: calc( var( --scw-spacing-1 ) * 3.9 );\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-mixins.html-autolayout-margins"
+  },
+  "html-autolayout-padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon--html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 2.4 );\n  padding-right: calc( var( --scw-spacing-1 ) * 2.4 );\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 3.9 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 2.4 );\n  padding-right: calc( var( --scw-spacing-1 ) * 2.4 );\n  padding-top: 0px;\n  padding-bottom: calc( var( --scw-spacing-1 ) * 3.9 );\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-mixins.html-autolayout-padding"
+  }
+}

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-.json

@@ -0,0 +1,52 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-mixins",
+    "namespace": "state-focus-style-button-size-small-container-scw-icon-icon-mixins"
+  },
+  "box": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  } \n}",
+    "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );\n  } @else {\n    background-color: rgba(0,0,0,0);\n  } \n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-mixins.box"
+  },
+  "sizing": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon--sizing {\n  width: 50px;\n  height: 50px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 50px;\n  height: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-mixins.sizing"
+  },
+  "width": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon--width {\n  width: 50px;\n}",
+    "outputSegment": "\n@mixin width {\n  width: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-mixins.width"
+  },
+  "height": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon--height {\n  height: 50px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 50px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-mixins.height"
+  },
+  "padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon--padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-mixins.padding"
+  },
+  "figma-autolayout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon--figma-autolayout { \n   \n}",
+    "outputSegment": "\n@mixin figma-autolayout { \n   \n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-mixins.figma-autolayout"
+  },
+  "absolute-layout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon--absolute-layout {\n  position: absolute;\n  left: 0px;\n  right: 0px;\n  top: 0px;\n  bottom: 0px; \n}",
+    "outputSegment": "\n@mixin absolute-layout {\n  position: absolute;\n  left: 0px;\n  right: 0px;\n  top: 0px;\n  bottom: 0px; \n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-mixins.absolute-layout"
+  },
+  "html-autolayout-margins": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon--html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: 0px;\n  margin-right: 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-mixins.html-autolayout-margins"
+  },
+  "html-autolayout-padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon--html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-mixins.html-autolayout-padding"
+  }
+}

package/dist/tokens/source/componentScssMixins/components-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector-.json

@@ -0,0 +1,52 @@
+{
+  "module-info": {
+    "output": "",
+    "path": "comp-scw-horizontal-nav-item/state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins",
+    "namespace": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins"
+  },
+  "box": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );\n  } @else {\n    background-color: var( --scw-color-grey-02 );\n  } \n}",
+    "outputSegment": "\n@mixin box (\n  $bgThemeVar: false, \n  $borderThemeVar: false\n) { \n  @if $bgThemeVar {\n    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );\n  } @else {\n    background-color: var( --scw-color-grey-02 );\n  } \n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.box"
+  },
+  "sizing": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector--sizing {\n  width: 44.6429px;\n  height: 39.5416px;\n}",
+    "outputSegment": "\n@mixin sizing {\n  width: 44.6429px;\n  height: 39.5416px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.sizing"
+  },
+  "width": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector--width {\n  width: 44.6429px;\n}",
+    "outputSegment": "\n@mixin width {\n  width: 44.6429px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.width"
+  },
+  "height": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector--height {\n  height: 39.5416px;\n}",
+    "outputSegment": "\n@mixin height {\n  height: 39.5416px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.height"
+  },
+  "padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector--padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegment": "\n@mixin padding {\n  padding-left: 0px;\n  padding-right: 0px;\n  padding-top: 0px;\n  padding-bottom: 0px;\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.padding"
+  },
+  "figma-autolayout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector--figma-autolayout { \n   \n}",
+    "outputSegment": "\n@mixin figma-autolayout { \n   \n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.figma-autolayout"
+  },
+  "absolute-layout": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector--absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 ); \n}",
+    "outputSegment": "\n@mixin absolute-layout {\n  position: absolute;\n  left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 ); \n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.absolute-layout"
+  },
+  "html-autolayout-margins": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector--html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  margin-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  margin-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-margins {\n  display: inline-block;\n  margin-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  margin-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  margin-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.html-autolayout-margins"
+  },
+  "html-autolayout-padding": {
+    "output": "\n@mixin comp-scw-horizontal-nav-item-state-focus-style-button-size-small-container-scw-icon-icon-vector--html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  padding-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  padding-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );\n}",
+    "outputSegment": "\n@mixin html-autolayout-padding {\n  display: inline-block;\n  padding-left: calc( var( --scw-spacing-1 ) * 0.26787109375 );\n  padding-right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );\n  padding-top: calc( var( --scw-spacing-1 ) * 0.5228515625 );\n  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );\n}",
+    "outputSegmentRef": "state-focus-style-button-size-small-container-scw-icon-icon-vector-mixins.html-autolayout-padding"
+  }
+}