scu-web-components 0.0.67 → 0.0.68

package/dist/tokens/source/componentScssMixins.scss

@@ -65532,4 +65532,1896 @@
   padding-right: 0px;
   padding-top: calc( var( --scw-spacing-1 ) * 0.1 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 0.1 );
+}
+
+
+@mixin comp-scw-icon-feature-base (
+  $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-icon-feature-base--sizing {
+  width: 373px;
+  height: 633px;
+}
+
+@mixin comp-scw-icon-feature-base--width {
+  width: 373px;
+}
+
+@mixin comp-scw-icon-feature-base--height {
+  height: 633px;
+}
+
+@mixin comp-scw-icon-feature-base--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-base--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-icon-feature-base-clickable (
+  $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-icon-feature-base-clickable--sizing {
+  width: 330px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable--width {
+  width: 330px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable--padding {
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 1.3 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 1.3 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 1.9 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 1.9 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-base-clickable--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 2.1 );
+  width: 330px;
+  top: calc( var( --scw-spacing-1 ) * 1.9 );
+  height: 80px; 
+}
+
+@mixin comp-scw-icon-feature-base-clickable--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 2.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * 2.2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 53.4 );
+}
+
+@mixin comp-scw-icon-feature-base-clickable--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 2.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 2.2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 53.4 );
+}
+
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-primary-09 ) );
+  } @else {
+    background-color: var( --scw-color-primary-09 );
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon--sizing {
+  width: 80px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon--width {
+  width: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 25 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 25 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 60px;
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--width {
+  width: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--height {
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-base-clickable-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+
+@mixin comp-scw-icon-feature-base-clickable-text (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-bold-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
+  } @else {
+    color: var( --scw-color-primary );
+  }
+  flex: 1; 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-text--sizing {
+  width: 218px;
+  height: 54px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-text--width {
+  width: 218px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-text--height {
+  height: 54px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-text--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-text--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-clickable-text--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 9.9 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.3 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.3 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+}
+
+@mixin comp-scw-icon-feature-base-clickable-text--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 9.9 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.3 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.3 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+}
+
+
+@mixin comp-scw-icon-feature-base-clickable-align-center (
+  $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-icon-feature-base-clickable-align-center--sizing {
+  width: 238px;
+  height: 153px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center--width {
+  width: 238px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center--height {
+  height: 153px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center--figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-bottom: calc( var( --scw-spacing-1 ) * 1.9 ); 
+        --margin-bottom: calc( var( --scw-spacing-1 ) * 1.9 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 6.8 );
+  width: 238px;
+  top: calc( var( --scw-spacing-1 ) * 13.4 );
+  height: 153px; 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 6.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 6.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 13.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 34.6 );
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 6.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 6.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 13.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 34.6 );
+}
+
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-primary-09 ) );
+  } @else {
+    background-color: var( --scw-color-primary-09 );
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon--sizing {
+  width: 80px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon--width {
+  width: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 7.9 );
+  margin-right: calc( var( --scw-spacing-1 ) * 7.9 );
+  margin-top: 0px;
+  margin-bottom: calc( var( --scw-spacing-1 ) * 7.3 );
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 7.9 );
+  padding-right: calc( var( --scw-spacing-1 ) * 7.9 );
+  padding-top: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 7.3 );
+}
+
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 60px;
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--width {
+  width: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--height {
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-text (
+  $themeVar: false
+) { 
+  text-align: CENTER;
+  font: var( --scw-type-text-bold-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar} , var( --scw-color-primary ) );
+  } @else {
+    color: var( --scw-color-primary );
+  }
+  align-self: stretch; 
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-text--sizing {
+  width: 238px;
+  height: 54px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-text--width {
+  width: 238px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-text--height {
+  height: 54px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-text--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-text--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-text--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 9.9 );
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-clickable-align-center-text--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 9.9 );
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-icon-feature-base-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-icon-feature-base-default--sizing {
+  width: 333px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-default--width {
+  width: 333px;
+}
+
+@mixin comp-scw-icon-feature-base-default--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-default--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-default--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 1.9 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 1.9 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-base-default--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 2.1 );
+  width: 333px;
+  top: calc( var( --scw-spacing-1 ) * 32.2 );
+  height: 80px; 
+}
+
+@mixin comp-scw-icon-feature-base-default--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 2.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.9 );
+  margin-top: calc( var( --scw-spacing-1 ) * 32.2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 23.1 );
+}
+
+@mixin comp-scw-icon-feature-base-default--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 2.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.9 );
+  padding-top: calc( var( --scw-spacing-1 ) * 32.2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 23.1 );
+}
+
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-primary-09 ) );
+  } @else {
+    background-color: var( --scw-color-primary-09 );
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon--sizing {
+  width: 80px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon--width {
+  width: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 25.3 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 25.3 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 60px;
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--width {
+  width: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--height {
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-base-default-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+
+@mixin comp-scw-icon-feature-base-default-text (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    color: var( --scw-color-grey-02 );
+  }
+  flex: 1; 
+}
+
+@mixin comp-scw-icon-feature-base-default-text--sizing {
+  width: 234px;
+  height: 54px;
+}
+
+@mixin comp-scw-icon-feature-base-default-text--width {
+  width: 234px;
+}
+
+@mixin comp-scw-icon-feature-base-default-text--height {
+  height: 54px;
+}
+
+@mixin comp-scw-icon-feature-base-default-text--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-icon-feature-base-default-text--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-default-text--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 9.9 );
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 1.3 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+}
+
+@mixin comp-scw-icon-feature-base-default-text--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 9.9 );
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 1.3 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.3 );
+}
+
+
+@mixin comp-scw-icon-feature-base-align-center (
+  $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-icon-feature-base-align-center--sizing {
+  width: 248px;
+  height: 153px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center--width {
+  width: 248px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center--height {
+  height: 153px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center--figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-bottom: calc( var( --scw-spacing-1 ) * 1.9 ); 
+        --margin-bottom: calc( var( --scw-spacing-1 ) * 1.9 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-base-align-center--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 6.8 );
+  width: 248px;
+  top: calc( var( --scw-spacing-1 ) * 43.7 );
+  height: 153px; 
+}
+
+@mixin comp-scw-icon-feature-base-align-center--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 6.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 5.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 43.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 4.3 );
+}
+
+@mixin comp-scw-icon-feature-base-align-center--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 6.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 5.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 43.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 4.3 );
+}
+
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-primary-09 ) );
+  } @else {
+    background-color: var( --scw-color-primary-09 );
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon--sizing {
+  width: 80px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon--width {
+  width: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 8.4 );
+  margin-right: calc( var( --scw-spacing-1 ) * 8.4 );
+  margin-top: 0px;
+  margin-bottom: calc( var( --scw-spacing-1 ) * 7.3 );
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 8.4 );
+  padding-right: calc( var( --scw-spacing-1 ) * 8.4 );
+  padding-top: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 7.3 );
+}
+
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 60px;
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--width {
+  width: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--height {
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-base-align-center-scw-icon-feature-icon-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+
+@mixin comp-scw-icon-feature-base-align-center-text (
+  $themeVar: false
+) { 
+  text-align: CENTER;
+  font: var( --scw-type-text-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    color: var( --scw-color-grey-02 );
+  }
+  align-self: stretch; 
+}
+
+@mixin comp-scw-icon-feature-base-align-center-text--sizing {
+  width: 248px;
+  height: 54px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-text--width {
+  width: 248px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-text--height {
+  height: 54px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-text--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-text--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-base-align-center-text--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 9.9 );
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-base-align-center-text--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 9.9 );
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-icon-feature-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-icon-feature-icon--sizing {
+  width: 397px;
+  height: 314px;
+}
+
+@mixin comp-scw-icon-feature-icon--width {
+  width: 397px;
+}
+
+@mixin comp-scw-icon-feature-icon--height {
+  height: 314px;
+}
+
+@mixin comp-scw-icon-feature-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-icon-feature-icon-background (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-primary-09 ) );
+  } @else {
+    background-color: var( --scw-color-primary-09 );
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-icon-background--sizing {
+  width: 80px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-background--width {
+  width: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-background--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-background--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-background--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-icon-background--absolute-layout {
+  position: absolute;
+  left: var( --scw-spacing-2 );
+  width: 80px;
+  top: var( --scw-spacing-2 );
+  height: 80px; 
+}
+
+@mixin comp-scw-icon-feature-icon-background--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: calc( var( --scw-spacing-1 ) * 29.7 );
+  margin-top: var( --scw-spacing-2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 21.4 );
+}
+
+@mixin comp-scw-icon-feature-icon-background--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: calc( var( --scw-spacing-1 ) * 29.7 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 21.4 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-background-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-icon-background-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 60px;
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-screenshot-2023-03-02-at-2-24-1--width {
+  width: 60px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-screenshot-2023-03-02-at-2-24-1--height {
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-icon-background-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-icon-background-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-background-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-background-size-medium (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-primary-09 ) );
+  } @else {
+    background-color: var( --scw-color-primary-09 );
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium--sizing {
+  width: 100px;
+  height: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium--width {
+  width: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium--height {
+  height: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 12.5 );
+  width: 100px;
+  top: var( --scw-spacing-2 );
+  height: 100px; 
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 12.5 );
+  margin-right: calc( var( --scw-spacing-1 ) * 17.2 );
+  margin-top: var( --scw-spacing-2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 19.4 );
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 12.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 17.2 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 19.4 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-background-size-medium-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 80px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium-screenshot-2023-03-02-at-2-24-1--width {
+  width: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium-screenshot-2023-03-02-at-2-24-1--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-medium-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-background-size-large (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-primary-09 ) );
+  } @else {
+    background-color: var( --scw-color-primary-09 );
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large--sizing {
+  width: 120px;
+  height: 120px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large--width {
+  width: 120px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large--height {
+  height: 120px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 25 );
+  width: 120px;
+  top: var( --scw-spacing-2 );
+  height: 120px; 
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 25 );
+  margin-right: calc( var( --scw-spacing-1 ) * 2.7 );
+  margin-top: var( --scw-spacing-2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 17.4 );
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 25 );
+  padding-right: calc( var( --scw-spacing-1 ) * 2.7 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 17.4 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-background-size-large-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 100px;
+  height: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large-screenshot-2023-03-02-at-2-24-1--width {
+  width: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large-screenshot-2023-03-02-at-2-24-1--height {
+  height: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-background-size-large-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-default (
+  $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: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-icon-default--sizing {
+  width: 80px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-default--width {
+  width: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-default--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-default--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-default--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-icon-default--absolute-layout {
+  position: absolute;
+  left: var( --scw-spacing-2 );
+  width: 80px;
+  top: calc( var( --scw-spacing-1 ) * 17.6 );
+  height: 80px; 
+}
+
+@mixin comp-scw-icon-feature-icon-default--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: calc( var( --scw-spacing-1 ) * 29.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 17.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 5.8 );
+}
+
+@mixin comp-scw-icon-feature-icon-default--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: calc( var( --scw-spacing-1 ) * 29.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 17.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 5.8 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-default-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-icon-default-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 60px;
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-icon-default-screenshot-2023-03-02-at-2-24-1--width {
+  width: 60px;
+}
+
+@mixin comp-scw-icon-feature-icon-default-screenshot-2023-03-02-at-2-24-1--height {
+  height: 60px;
+}
+
+@mixin comp-scw-icon-feature-icon-default-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-icon-default-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-icon-default-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-icon-default-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-default-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-size-medium (
+  $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: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium--sizing {
+  width: 100px;
+  height: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium--width {
+  width: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium--height {
+  height: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 12.5 );
+  width: 100px;
+  top: calc( var( --scw-spacing-1 ) * 17.6 );
+  height: 100px; 
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 12.5 );
+  margin-right: calc( var( --scw-spacing-1 ) * 17.2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 17.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 3.8 );
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 12.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 17.2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 17.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 3.8 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-size-medium-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 80px;
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium-screenshot-2023-03-02-at-2-24-1--width {
+  width: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium-screenshot-2023-03-02-at-2-24-1--height {
+  height: 80px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-size-medium-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-size-large (
+  $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: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-icon-feature-icon-size-large--sizing {
+  width: 120px;
+  height: 120px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-large--width {
+  width: 120px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-large--height {
+  height: 120px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-large--padding {
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-size-large--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-1 ); 
+        --margin-right: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-icon-feature-icon-size-large--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 25 );
+  width: 120px;
+  top: calc( var( --scw-spacing-1 ) * 17.6 );
+  height: 120px; 
+}
+
+@mixin comp-scw-icon-feature-icon-size-large--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 25 );
+  margin-right: calc( var( --scw-spacing-1 ) * 2.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 17.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.8 );
+}
+
+@mixin comp-scw-icon-feature-icon-size-large--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 25 );
+  padding-right: calc( var( --scw-spacing-1 ) * 2.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 17.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.8 );
+}
+
+
+@mixin comp-scw-icon-feature-icon-size-large-screenshot-2023-03-02-at-2-24-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-icon-feature-icon-size-large-screenshot-2023-03-02-at-2-24-1--sizing {
+  width: 100px;
+  height: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-large-screenshot-2023-03-02-at-2-24-1--width {
+  width: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-large-screenshot-2023-03-02-at-2-24-1--height {
+  height: 100px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-large-screenshot-2023-03-02-at-2-24-1--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-icon-feature-icon-size-large-screenshot-2023-03-02-at-2-24-1--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-icon-feature-icon-size-large-screenshot-2023-03-02-at-2-24-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-icon-feature-icon-size-large-screenshot-2023-03-02-at-2-24-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-1 );
+  margin-right: var( --scw-spacing-1 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+
+@mixin comp-scw-icon-feature-icon-size-large-screenshot-2023-03-02-at-2-24-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-1 );
+  padding-right: var( --scw-spacing-1 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
 }