scu-web-components 0.0.46 → 0.0.47

package/dist/tokens/source/componentScssMixins.scss

@@ -35344,6 +35344,1128 @@
 }
 
 
+@mixin comp-scw-stepper-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 5px 5px 5px 5px;
+  border-width: 1px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , rgba(151,71,255,1) );
+  } @else {
+    border-color: rgba(151,71,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-icon--sizing {
+  width: 50px;
+  height: 80px;
+}
+
+@mixin comp-scw-stepper-icon--width {
+  width: 50px;
+}
+
+@mixin comp-scw-stepper-icon--height {
+  height: 80px;
+}
+
+@mixin comp-scw-stepper-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-stepper-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-icon-default (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-icon-default--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-icon-default--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-icon-default--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-icon-default--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-icon-default--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-icon-default--absolute-layout {
+  position: absolute;
+  left: var( --scw-spacing-2 );
+  width: 10px;
+  top: var( --scw-spacing-2 );
+  height: 10px; 
+}
+
+@mixin comp-scw-stepper-icon-default--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: var( --scw-spacing-2 );
+  margin-top: var( --scw-spacing-2 );
+  margin-bottom: var( --scw-spacing-5 );
+}
+
+@mixin comp-scw-stepper-icon-default--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: var( --scw-spacing-5 );
+}
+
+
+@mixin comp-scw-stepper-icon-default-circle (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-092 , var( --scw-color-grey-092 ) );
+  } @else {
+    background-color: var( --scw-color-grey-092 );
+  }
+  border-radius: 50% 50% 50% 50%; 
+}
+
+@mixin comp-scw-stepper-icon-default-circle--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-icon-default-circle--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-icon-default-circle--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-icon-default-circle--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-icon-default-circle--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-icon-default-circle--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px; 
+}
+
+@mixin comp-scw-stepper-icon-default-circle--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-icon-default-circle--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-icon-state-focused (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-icon-state-focused--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-icon-state-focused--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-icon-state-focused--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-icon-state-focused--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-icon-state-focused--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-icon-state-focused--absolute-layout {
+  position: absolute;
+  left: var( --scw-spacing-2 );
+  width: 10px;
+  top: var( --scw-spacing-5 );
+  height: 10px; 
+}
+
+@mixin comp-scw-stepper-icon-state-focused--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: var( --scw-spacing-2 );
+  margin-top: var( --scw-spacing-5 );
+  margin-bottom: var( --scw-spacing-2 );
+}
+
+@mixin comp-scw-stepper-icon-state-focused--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-5 );
+  padding-bottom: var( --scw-spacing-2 );
+}
+
+
+@mixin comp-scw-stepper-icon-state-focused-circle (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-07 , var( --scw-color-grey-07 ) );
+  } @else {
+    background-color: var( --scw-color-grey-07 );
+  }
+  border-radius: 50% 50% 50% 50%; 
+}
+
+@mixin comp-scw-stepper-icon-state-focused-circle--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-icon-state-focused-circle--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-icon-state-focused-circle--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-icon-state-focused-circle--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-icon-state-focused-circle--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-icon-state-focused-circle--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px; 
+}
+
+@mixin comp-scw-stepper-icon-state-focused-circle--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-icon-state-focused-circle--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 5px 5px 5px 5px;
+  border-width: 1px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , rgba(151,71,255,1) );
+  } @else {
+    border-color: rgba(151,71,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper--sizing {
+  width: 207px;
+  height: 140px;
+}
+
+@mixin comp-scw-stepper--width {
+  width: 207px;
+}
+
+@mixin comp-scw-stepper--height {
+  height: 140px;
+}
+
+@mixin comp-scw-stepper--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper--absolute-layout {
+   
+}
+
+@mixin comp-scw-stepper--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-default (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-default--sizing {
+  width: 154px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-default--width {
+  width: 154px;
+}
+
+@mixin comp-scw-stepper-default--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-default--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-default--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 3.8 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 3.8 ); 
+      } 
+}
+
+@mixin comp-scw-stepper-default--absolute-layout {
+  position: absolute;
+  left: var( --scw-spacing-2 );
+  width: 154px;
+  top: var( --scw-spacing-2 );
+  height: 10px; 
+}
+
+@mixin comp-scw-stepper-default--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.3 );
+  margin-top: var( --scw-spacing-2 );
+  margin-bottom: var( --scw-spacing-11 );
+}
+
+@mixin comp-scw-stepper-default--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.3 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: var( --scw-spacing-11 );
+}
+
+
+@mixin comp-scw-stepper-default-scw-stepper-item (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item--absolute-layout {
+   
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 14.4 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 14.4 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-default-scw-stepper-item-circle (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-07 , var( --scw-color-grey-07 ) );
+  } @else {
+    background-color: var( --scw-color-grey-07 );
+  }
+  border-radius: 50% 50% 50% 50%; 
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item-circle--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item-circle--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item-circle--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item-circle--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item-circle--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item-circle--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px; 
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item-circle--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-default-scw-stepper-item-circle--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-focused-page-2 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-focused-page-2--sizing {
+  width: 154px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-2--width {
+  width: 154px;
+}
+
+@mixin comp-scw-stepper-focused-page-2--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-2--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-2--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 3.8 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 3.8 ); 
+      } 
+}
+
+@mixin comp-scw-stepper-focused-page-2--absolute-layout {
+  position: absolute;
+  left: var( --scw-spacing-2 );
+  width: 154px;
+  top: var( --scw-spacing-5 );
+  height: 10px; 
+}
+
+@mixin comp-scw-stepper-focused-page-2--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.3 );
+  margin-top: var( --scw-spacing-5 );
+  margin-bottom: var( --scw-spacing-8 );
+}
+
+@mixin comp-scw-stepper-focused-page-2--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.3 );
+  padding-top: var( --scw-spacing-5 );
+  padding-bottom: var( --scw-spacing-8 );
+}
+
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item--absolute-layout {
+   
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 14.4 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 14.4 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item-circle (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-092 , var( --scw-color-grey-092 ) );
+  } @else {
+    background-color: var( --scw-color-grey-092 );
+  }
+  border-radius: 50% 50% 50% 50%; 
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item-circle--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item-circle--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item-circle--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item-circle--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item-circle--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item-circle--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px; 
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item-circle--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-2-scw-stepper-item-circle--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-focused-page-3 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-focused-page-3--sizing {
+  width: 154px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-3--width {
+  width: 154px;
+}
+
+@mixin comp-scw-stepper-focused-page-3--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-3--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-3--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 3.8 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 3.8 ); 
+      } 
+}
+
+@mixin comp-scw-stepper-focused-page-3--absolute-layout {
+  position: absolute;
+  left: var( --scw-spacing-2 );
+  width: 154px;
+  top: var( --scw-spacing-8 );
+  height: 10px; 
+}
+
+@mixin comp-scw-stepper-focused-page-3--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.3 );
+  margin-top: var( --scw-spacing-8 );
+  margin-bottom: var( --scw-spacing-5 );
+}
+
+@mixin comp-scw-stepper-focused-page-3--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.3 );
+  padding-top: var( --scw-spacing-8 );
+  padding-bottom: var( --scw-spacing-5 );
+}
+
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item--absolute-layout {
+   
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 14.4 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 14.4 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item-circle (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-092 , var( --scw-color-grey-092 ) );
+  } @else {
+    background-color: var( --scw-color-grey-092 );
+  }
+  border-radius: 50% 50% 50% 50%; 
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item-circle--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item-circle--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item-circle--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item-circle--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item-circle--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item-circle--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px; 
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item-circle--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-3-scw-stepper-item-circle--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-focused-page-4 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-focused-page-4--sizing {
+  width: 154px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-4--width {
+  width: 154px;
+}
+
+@mixin comp-scw-stepper-focused-page-4--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-4--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-4--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 3.8 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 3.8 ); 
+      } 
+}
+
+@mixin comp-scw-stepper-focused-page-4--absolute-layout {
+  position: absolute;
+  left: var( --scw-spacing-2 );
+  width: 154px;
+  top: var( --scw-spacing-11 );
+  height: 10px; 
+}
+
+@mixin comp-scw-stepper-focused-page-4--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.3 );
+  margin-top: var( --scw-spacing-11 );
+  margin-bottom: var( --scw-spacing-2 );
+}
+
+@mixin comp-scw-stepper-focused-page-4--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.3 );
+  padding-top: var( --scw-spacing-11 );
+  padding-bottom: var( --scw-spacing-2 );
+}
+
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+  } @else {
+    background-color: rgba(255,255,255,1);
+  } 
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item--absolute-layout {
+   
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 14.4 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 14.4 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item-circle (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-092 , var( --scw-color-grey-092 ) );
+  } @else {
+    background-color: var( --scw-color-grey-092 );
+  }
+  border-radius: 50% 50% 50% 50%; 
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item-circle--sizing {
+  width: 10px;
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item-circle--width {
+  width: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item-circle--height {
+  height: 10px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item-circle--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item-circle--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item-circle--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px; 
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item-circle--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-stepper-focused-page-4-scw-stepper-item-circle--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
 @mixin comp-scw-input (
   $bgThemeVar: false, 
   $borderThemeVar: false