npm - scu-web-components - Versions diffs - 0.0.99 → 0.0.101 - Mend

scu-web-components 0.0.99 → 0.0.101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1228) hide show

package/dist/tokens/source/componentScssMixins.scss CHANGED Viewed

@@ -80557,9 +80557,9 @@
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar}-02 , var( --scw-color-primary-02 ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary-02 );
   }
 }
@@ -80794,9 +80794,9 @@
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar}-02 , var( --scw-color-primary-02 ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary-02 );
   }
 }
@@ -81117,9 +81117,9 @@
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar}-02 , var( --scw-color-primary-02 ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary-02 );
   }
 }
@@ -81493,16 +81493,16 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-primary-02 ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary-02 );
   }
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar}-02 , var( --scw-color-primary-02 ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary-02 );
   }
 }
@@ -81729,16 +81729,16 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-primary-02 ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary-02 );
   }
   border-width: 1px;
   border-style: solid;
   @if $borderThemeVar {
-    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+    border-color: var( #{$borderThemeVar}-02 , var( --scw-color-primary-02 ) );
   } @else {
-    border-color: var( --scw-color-primary-04 );
+    border-color: var( --scw-color-primary-02 );
   }
 }
@@ -95100,7 +95100,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 15.9 );
   width: 114px;
-  top: var( --scw-spacing-2 );
+  top: calc( var( --scw-spacing-1 ) * 2.0080078125 );
   height: 89px;
 }
@@ -95108,16 +95108,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 15.9 );
   margin-right: var( --scw-spacing-2 );
-  margin-top: var( --scw-spacing-2 );
-  margin-bottom: var( --scw-spacing-9 );
+  margin-top: calc( var( --scw-spacing-1 ) * 2.0080078125 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 8.9919921875 );
 }
 @mixin comp-scw-floating-button-state-hover--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 15.9 );
   padding-right: var( --scw-spacing-2 );
-  padding-top: var( --scw-spacing-2 );
-  padding-bottom: var( --scw-spacing-9 );
+  padding-top: calc( var( --scw-spacing-1 ) * 2.0080078125 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 8.9919921875 );
 }
@@ -106760,9 +106760,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-extrabold-08-font );
   @if $themeVar {
-    color: var( #{$themeVar}-03 , var( --scw-color-grey-03 ) );
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
   } @else {
-    color: var( --scw-color-grey-03 );
+    color: var( --scw-color-primary-03 );
   }
   align-self: stretch;
 }
@@ -141710,7 +141710,7 @@
 @mixin comp-scw-link-base--sizing {
   width: 553px;
-  height: 476px;
+  height: 622px;
 }
 @mixin comp-scw-link-base--width {
@@ -141718,7 +141718,7 @@
 }
 @mixin comp-scw-link-base--height {
-  height: 476px;
+  height: 622px;
 }
 @mixin comp-scw-link-base--padding {
@@ -141820,7 +141820,7 @@
   margin-left: var( --scw-spacing-2 );
   margin-right: calc( var( --scw-spacing-1 ) * 45.3 );
   margin-top: var( --scw-spacing-2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 40.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 55.5 );
 }
 @mixin comp-scw-link-base-default--html-autolayout-padding {
@@ -141828,7 +141828,7 @@
   padding-left: var( --scw-spacing-2 );
   padding-right: calc( var( --scw-spacing-1 ) * 45.3 );
   padding-top: var( --scw-spacing-2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 40.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 55.5 );
 }
@@ -142371,7 +142371,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 15.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 32.1 );
   margin-top: var( --scw-spacing-2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 40.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 55.5 );
 }
 @mixin comp-scw-link-base-state-hover--html-autolayout-padding {
@@ -142379,7 +142379,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 15.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 32.1 );
   padding-top: var( --scw-spacing-2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 40.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 55.5 );
 }
@@ -142912,7 +142912,7 @@
 @mixin comp-scw-link-base-state-focused--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 28.4 );
+  left: calc( var( --scw-spacing-1 ) * 28.55 );
   width: 80px;
   top: var( --scw-spacing-2 );
   height: 47px;
@@ -142920,18 +142920,18 @@
 @mixin comp-scw-link-base-state-focused--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 28.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * 18.9 );
+  margin-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  margin-right: calc( var( --scw-spacing-1 ) * 18.75 );
   margin-top: var( --scw-spacing-2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 40.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 55.5 );
 }
 @mixin comp-scw-link-base-state-focused--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 28.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * 18.9 );
+  padding-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  padding-right: calc( var( --scw-spacing-1 ) * 18.75 );
   padding-top: var( --scw-spacing-2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 40.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 55.5 );
 }
@@ -143474,7 +143474,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 41.8 );
   margin-right: calc( var( --scw-spacing-1 ) * 5.5 );
   margin-top: var( --scw-spacing-2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 40.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 55.5 );
 }
 @mixin comp-scw-link-base-state-disabled--html-autolayout-padding {
@@ -143482,7 +143482,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 41.8 );
   padding-right: calc( var( --scw-spacing-1 ) * 5.5 );
   padding-top: var( --scw-spacing-2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 40.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 55.5 );
 }
@@ -144025,7 +144025,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 41.8 );
   margin-right: calc( var( --scw-spacing-1 ) * 5.5 );
   margin-top: var( --scw-spacing-8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 34.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 49.5 );
 }
 @mixin comp-scw-link-base-design-outline-state-disabled--html-autolayout-padding {
@@ -144033,7 +144033,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 41.8 );
   padding-right: calc( var( --scw-spacing-1 ) * 5.5 );
   padding-top: var( --scw-spacing-8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 34.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 49.5 );
 }
@@ -144576,7 +144576,7 @@
   margin-left: var( --scw-spacing-2 );
   margin-right: calc( var( --scw-spacing-1 ) * 45.3 );
   margin-top: var( --scw-spacing-8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 34.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 49.5 );
 }
 @mixin comp-scw-link-base-design-outline--html-autolayout-padding {
@@ -144584,7 +144584,7 @@
   padding-left: var( --scw-spacing-2 );
   padding-right: calc( var( --scw-spacing-1 ) * 45.3 );
   padding-top: var( --scw-spacing-8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 34.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 49.5 );
 }
@@ -145117,7 +145117,7 @@
 @mixin comp-scw-link-base-design-outline-state-focused--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 28.4 );
+  left: calc( var( --scw-spacing-1 ) * 28.55 );
   width: 80px;
   top: var( --scw-spacing-8 );
   height: 47px;
@@ -145125,18 +145125,18 @@
 @mixin comp-scw-link-base-design-outline-state-focused--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 28.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * 18.9 );
+  margin-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  margin-right: calc( var( --scw-spacing-1 ) * 18.75 );
   margin-top: var( --scw-spacing-8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 34.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 49.5 );
 }
 @mixin comp-scw-link-base-design-outline-state-focused--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 28.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * 18.9 );
+  padding-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  padding-right: calc( var( --scw-spacing-1 ) * 18.75 );
   padding-top: var( --scw-spacing-8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 34.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 49.5 );
 }
@@ -145679,7 +145679,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 15.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 32.1 );
   margin-top: var( --scw-spacing-8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 34.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 49.5 );
 }
 @mixin comp-scw-link-base-design-outline-state-hover--html-autolayout-padding {
@@ -145687,7 +145687,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 15.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 32.1 );
   padding-top: var( --scw-spacing-8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 34.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 49.5 );
 }
@@ -146230,7 +146230,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 41.8 );
   margin-right: calc( var( --scw-spacing-1 ) * 5.5 );
   margin-top: calc( var( --scw-spacing-1 ) * 14 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 43.5 );
 }
 @mixin comp-scw-link-base-design-light-state-disabled--html-autolayout-padding {
@@ -146238,7 +146238,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 41.8 );
   padding-right: calc( var( --scw-spacing-1 ) * 5.5 );
   padding-top: calc( var( --scw-spacing-1 ) * 14 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 43.5 );
 }
@@ -146714,6 +146714,557 @@
 }
+@mixin comp-scw-link-base-design-white-state-disabled (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-grey-09 ) );
+  } @else {
+    background-color: var( --scw-color-grey-09 );
+  }
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-09 , var( --scw-color-grey-09 ) );
+  } @else {
+    border-color: var( --scw-color-grey-09 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-disabled--sizing {
+  width: 80px;
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled--width {
+  width: 80px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled--height {
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled--figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  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 ) * 0.4 );
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+      }
+}
+@mixin comp-scw-link-base-design-white-state-disabled--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 42.1 );
+  width: 80px;
+  top: calc( var( --scw-spacing-1 ) * 20.8 );
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 42.1 );
+  margin-right: calc( var( --scw-spacing-1 ) * 5.2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 20.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 36.7 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 42.1 );
+  padding-right: calc( var( --scw-spacing-1 ) * 5.2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 20.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 36.7 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label (
+  $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-link-base-design-white-state-disabled-label--sizing {
+  width: 80px;
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label--width {
+  width: 80px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label--height {
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label--padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label--figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) {
+        margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+      }
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon (
+  $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-link-base-design-white-state-disabled-label-left-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon (
+  $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-link-base-design-white-state-disabled-label-left-icon-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon-vector (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-07 , var( --scw-color-grey-07 ) );
+  } @else {
+    background-color: var( --scw-color-grey-07 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon-vector--sizing {
+  width: 6.4201px;
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon-vector--width {
+  width: 6.4201px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon-vector--height {
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon-vector--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon-vector--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon-vector--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon-vector--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-left-icon-icon-vector--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-label (
+  $themeVar: false
+) {
+  text-align: CENTER;
+  font: var( --scw-type-text-semibold-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-07 , var( --scw-color-grey-07 ) );
+  } @else {
+    color: var( --scw-color-grey-07 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-label--sizing {
+  width: 44px;
+  height: 27px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-label--width {
+  width: 44px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-label--height {
+  height: 27px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-label--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-label--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon (
+  $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-link-base-design-white-state-disabled-label-right-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 6.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.3 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 6.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.3 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon (
+  $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-link-base-design-white-state-disabled-label-right-icon-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon-vector (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-07 , var( --scw-color-grey-07 ) );
+  } @else {
+    background-color: var( --scw-color-grey-07 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon-vector--sizing {
+  width: 6.4201px;
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon-vector--width {
+  width: 6.4201px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon-vector--height {
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon-vector--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon-vector--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon-vector--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon-vector--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
+@mixin comp-scw-link-base-design-white-state-disabled-label-right-icon-icon-vector--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
 @mixin comp-scw-link-base-design-light (
   $bgThemeVar: false,
   $borderThemeVar: false
@@ -146781,7 +147332,7 @@
   margin-left: var( --scw-spacing-2 );
   margin-right: calc( var( --scw-spacing-1 ) * 45.3 );
   margin-top: calc( var( --scw-spacing-1 ) * 14 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 43.5 );
 }
 @mixin comp-scw-link-base-design-light--html-autolayout-padding {
@@ -146789,7 +147340,7 @@
   padding-left: var( --scw-spacing-2 );
   padding-right: calc( var( --scw-spacing-1 ) * 45.3 );
   padding-top: calc( var( --scw-spacing-1 ) * 14 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 43.5 );
 }
@@ -147265,6 +147816,557 @@
 }
+@mixin comp-scw-link-base-design-white (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+  } @else {
+    background-color: var( --scw-color-grey-10 );
+  }
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-10 , var( --scw-color-grey-10 ) );
+  } @else {
+    border-color: var( --scw-color-grey-10 );
+  }
+}
+@mixin comp-scw-link-base-design-white--sizing {
+  width: 80px;
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white--width {
+  width: 80px;
+}
+@mixin comp-scw-link-base-design-white--height {
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white--figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  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 ) * 0.4 );
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+      }
+}
+@mixin comp-scw-link-base-design-white--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 2.3 );
+  width: 80px;
+  top: calc( var( --scw-spacing-1 ) * 20.8 );
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 2.3 );
+  margin-right: calc( var( --scw-spacing-1 ) * 45 );
+  margin-top: calc( var( --scw-spacing-1 ) * 20.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 36.7 );
+}
+@mixin comp-scw-link-base-design-white--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 2.3 );
+  padding-right: calc( var( --scw-spacing-1 ) * 45 );
+  padding-top: calc( var( --scw-spacing-1 ) * 20.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 36.7 );
+}
+@mixin comp-scw-link-base-design-white-label (
+  $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-link-base-design-white-label--sizing {
+  width: 80px;
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-label--width {
+  width: 80px;
+}
+@mixin comp-scw-link-base-design-white-label--height {
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-label--padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-label--figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) {
+        margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+      }
+}
+@mixin comp-scw-link-base-design-white-label--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon (
+  $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-link-base-design-white-label-left-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-label-left-icon--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-label-left-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-label-left-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon (
+  $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-link-base-design-white-label-left-icon-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon-vector (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    background-color: var( --scw-color-grey-02 );
+  }
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon-vector--sizing {
+  width: 6.4201px;
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon-vector--width {
+  width: 6.4201px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon-vector--height {
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon-vector--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon-vector--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon-vector--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon-vector--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-label-left-icon-icon-vector--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-label-label (
+  $themeVar: false
+) {
+  text-align: CENTER;
+  font: var( --scw-type-text-semibold-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    color: var( --scw-color-grey-02 );
+  }
+}
+@mixin comp-scw-link-base-design-white-label-label--sizing {
+  width: 44px;
+  height: 27px;
+}
+@mixin comp-scw-link-base-design-white-label-label--width {
+  width: 44px;
+}
+@mixin comp-scw-link-base-design-white-label-label--height {
+  height: 27px;
+}
+@mixin comp-scw-link-base-design-white-label-label--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+@mixin comp-scw-link-base-design-white-label-label--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-label-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-label-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-label-right-icon (
+  $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-link-base-design-white-label-right-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-label-right-icon--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-label-right-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 6.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.3 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-label-right-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 6.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.3 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon (
+  $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-link-base-design-white-label-right-icon-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon-vector (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    background-color: var( --scw-color-grey-02 );
+  }
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon-vector--sizing {
+  width: 6.4201px;
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon-vector--width {
+  width: 6.4201px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon-vector--height {
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon-vector--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon-vector--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon-vector--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon-vector--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
+@mixin comp-scw-link-base-design-white-label-right-icon-icon-vector--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
 @mixin comp-scw-link-base-design-light-state-focused (
   $bgThemeVar: false,
   $borderThemeVar: false
@@ -147322,7 +148424,7 @@
 @mixin comp-scw-link-base-design-light-state-focused--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 28.4 );
+  left: calc( var( --scw-spacing-1 ) * 28.55 );
   width: 80px;
   top: calc( var( --scw-spacing-1 ) * 14 );
   height: 47px;
@@ -147330,18 +148432,18 @@
 @mixin comp-scw-link-base-design-light-state-focused--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 28.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * 18.9 );
+  margin-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  margin-right: calc( var( --scw-spacing-1 ) * 18.75 );
   margin-top: calc( var( --scw-spacing-1 ) * 14 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 43.5 );
 }
 @mixin comp-scw-link-base-design-light-state-focused--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 28.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * 18.9 );
+  padding-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  padding-right: calc( var( --scw-spacing-1 ) * 18.75 );
   padding-top: calc( var( --scw-spacing-1 ) * 14 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 43.5 );
 }
@@ -147817,6 +148919,558 @@
 }
+@mixin comp-scw-link-base-design-white-state-focused (
+  $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: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-07 , var( --scw-color-grey-07 ) );
+  } @else {
+    border-color: var( --scw-color-grey-07 );
+  }
+  box-shadow: var( --scw-effect-focus-shadow );
+}
+@mixin comp-scw-link-base-design-white-state-focused--sizing {
+  width: 80px;
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-focused--width {
+  width: 80px;
+}
+@mixin comp-scw-link-base-design-white-state-focused--height {
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-focused--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-focused--figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  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 ) * 0.4 );
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+      }
+}
+@mixin comp-scw-link-base-design-white-state-focused--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 28.55 );
+  width: 80px;
+  top: calc( var( --scw-spacing-1 ) * 20.8 );
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-focused--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  margin-right: calc( var( --scw-spacing-1 ) * 18.75 );
+  margin-top: calc( var( --scw-spacing-1 ) * 20.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 36.7 );
+}
+@mixin comp-scw-link-base-design-white-state-focused--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  padding-right: calc( var( --scw-spacing-1 ) * 18.75 );
+  padding-top: calc( var( --scw-spacing-1 ) * 20.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 36.7 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label (
+  $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-link-base-design-white-state-focused-label--sizing {
+  width: 80px;
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label--width {
+  width: 80px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label--height {
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label--padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label--figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) {
+        margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+      }
+}
+@mixin comp-scw-link-base-design-white-state-focused-label--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon (
+  $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-link-base-design-white-state-focused-label-left-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon (
+  $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-link-base-design-white-state-focused-label-left-icon-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon-vector (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    background-color: var( --scw-color-grey-02 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon-vector--sizing {
+  width: 6.4201px;
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon-vector--width {
+  width: 6.4201px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon-vector--height {
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon-vector--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon-vector--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon-vector--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon-vector--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-left-icon-icon-vector--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-label (
+  $themeVar: false
+) {
+  text-align: CENTER;
+  font: var( --scw-type-text-semibold-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    color: var( --scw-color-grey-02 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-label--sizing {
+  width: 44px;
+  height: 27px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-label--width {
+  width: 44px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-label--height {
+  height: 27px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-label--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-label--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon (
+  $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-link-base-design-white-state-focused-label-right-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 6.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.3 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 6.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.3 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon (
+  $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-link-base-design-white-state-focused-label-right-icon-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon-vector (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    background-color: var( --scw-color-grey-02 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon-vector--sizing {
+  width: 6.4201px;
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon-vector--width {
+  width: 6.4201px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon-vector--height {
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon-vector--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon-vector--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon-vector--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon-vector--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
+@mixin comp-scw-link-base-design-white-state-focused-label-right-icon-icon-vector--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
 @mixin comp-scw-link-base-design-light-state-hover (
   $bgThemeVar: false,
   $borderThemeVar: false
@@ -147884,7 +149538,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 15.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 32.1 );
   margin-top: calc( var( --scw-spacing-1 ) * 14 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 43.5 );
 }
 @mixin comp-scw-link-base-design-light-state-hover--html-autolayout-padding {
@@ -147892,7 +149546,7 @@
   padding-left: calc( var( --scw-spacing-1 ) * 15.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 32.1 );
   padding-top: calc( var( --scw-spacing-1 ) * 14 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 28.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 43.5 );
 }
@@ -148368,6 +150022,557 @@
 }
+@mixin comp-scw-link-base-design-white-state-hover (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-grey-09 ) );
+  } @else {
+    background-color: var( --scw-color-grey-09 );
+  }
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-09 , var( --scw-color-grey-09 ) );
+  } @else {
+    border-color: var( --scw-color-grey-09 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-hover--sizing {
+  width: 80px;
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-hover--width {
+  width: 80px;
+}
+@mixin comp-scw-link-base-design-white-state-hover--height {
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-hover--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-hover--figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  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 ) * 0.4 );
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+      }
+}
+@mixin comp-scw-link-base-design-white-state-hover--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 15.5 );
+  width: 80px;
+  top: calc( var( --scw-spacing-1 ) * 20.8 );
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-hover--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 15.5 );
+  margin-right: calc( var( --scw-spacing-1 ) * 31.8 );
+  margin-top: calc( var( --scw-spacing-1 ) * 20.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 36.7 );
+}
+@mixin comp-scw-link-base-design-white-state-hover--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 15.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 31.8 );
+  padding-top: calc( var( --scw-spacing-1 ) * 20.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 36.7 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label (
+  $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-link-base-design-white-state-hover-label--sizing {
+  width: 80px;
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label--width {
+  width: 80px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label--height {
+  height: 47px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label--padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label--figma-autolayout {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+  & > *:not(:last-child) {
+        margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+      }
+}
+@mixin comp-scw-link-base-design-white-state-hover-label--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon (
+  $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-link-base-design-white-state-hover-label-left-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 4.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon (
+  $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-link-base-design-white-state-hover-label-left-icon-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon-vector (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    background-color: var( --scw-color-grey-02 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon-vector--sizing {
+  width: 6.4201px;
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon-vector--width {
+  width: 6.4201px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon-vector--height {
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon-vector--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon-vector--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon-vector--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon-vector--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-left-icon-icon-vector--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 0.5383574440122174 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.51962890625 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.2549987512335747 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.24967308044433595 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-label (
+  $themeVar: false
+) {
+  text-align: CENTER;
+  font: var( --scw-type-text-semibold-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    color: var( --scw-color-grey-02 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-label--sizing {
+  width: 44px;
+  height: 27px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-label--width {
+  width: 44px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-label--height {
+  height: 27px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-label--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-label--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  margin-top: var( --scw-spacing-1 );
+  margin-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.8 );
+  padding-top: var( --scw-spacing-1 );
+  padding-bottom: var( --scw-spacing-1 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon (
+  $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-link-base-design-white-state-hover-label-right-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon--absolute-layout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 6.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * -0.3 );
+  margin-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 6.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * -0.3 );
+  padding-top: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 1.5 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon (
+  $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-link-base-design-white-state-hover-label-right-icon-icon--sizing {
+  width: 17px;
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon--width {
+  width: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon--height {
+  height: 17px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon--absolute-layout {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 0.0000244140625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * -0.0000244140625 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon-vector (
+  $bgThemeVar: false,
+  $borderThemeVar: false
+) {
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    background-color: var( --scw-color-grey-02 );
+  }
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon-vector--sizing {
+  width: 6.4201px;
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon-vector--width {
+  width: 6.4201px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon-vector--height {
+  height: 11.9533px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon-vector--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon-vector--figma-autolayout {
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon-vector--absolute-layout {
+  position: absolute;
+  left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon-vector--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  margin-right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
+@mixin comp-scw-link-base-design-white-state-hover-label-right-icon-icon-vector--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 0.5383788540006208 );
+  padding-right: calc( var( --scw-spacing-1 ) * 0.5196074485778809 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.2550014215216606 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.24967041015625 );
+}
 @mixin comp-scw-link-base-design-block-link (
   $bgThemeVar: false,
   $borderThemeVar: false
@@ -148425,7 +150630,7 @@
   position: absolute;
   left: var( --scw-spacing-2 );
   width: 80px;
-  top: calc( var( --scw-spacing-1 ) * 20 );
+  top: calc( var( --scw-spacing-1 ) * 27.4 );
   height: 47px;
 }
@@ -148433,16 +150638,16 @@
   display: inline-block;
   margin-left: var( --scw-spacing-2 );
   margin-right: calc( var( --scw-spacing-1 ) * 45.3 );
-  margin-top: calc( var( --scw-spacing-1 ) * 20 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 22.9 );
+  margin-top: calc( var( --scw-spacing-1 ) * 27.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 30.1 );
 }
 @mixin comp-scw-link-base-design-block-link--html-autolayout-padding {
   display: inline-block;
   padding-left: var( --scw-spacing-2 );
   padding-right: calc( var( --scw-spacing-1 ) * 45.3 );
-  padding-top: calc( var( --scw-spacing-1 ) * 20 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 22.9 );
+  padding-top: calc( var( --scw-spacing-1 ) * 27.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 30.1 );
 }
@@ -148975,7 +151180,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 15.2 );
   width: 80px;
-  top: calc( var( --scw-spacing-1 ) * 20 );
+  top: calc( var( --scw-spacing-1 ) * 27.4 );
   height: 47px;
 }
@@ -148983,16 +151188,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 15.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 32.1 );
-  margin-top: calc( var( --scw-spacing-1 ) * 20 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 22.9 );
+  margin-top: calc( var( --scw-spacing-1 ) * 27.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 30.1 );
 }
 @mixin comp-scw-link-base-design-block-link-state-hover--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 15.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 32.1 );
-  padding-top: calc( var( --scw-spacing-1 ) * 20 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 22.9 );
+  padding-top: calc( var( --scw-spacing-1 ) * 27.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 30.1 );
 }
@@ -149525,7 +151730,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 42.2 );
   width: 80px;
-  top: calc( var( --scw-spacing-1 ) * 20 );
+  top: calc( var( --scw-spacing-1 ) * 27.4 );
   height: 47px;
 }
@@ -149533,16 +151738,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 42.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 5.1 );
-  margin-top: calc( var( --scw-spacing-1 ) * 20 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 22.9 );
+  margin-top: calc( var( --scw-spacing-1 ) * 27.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 30.1 );
 }
 @mixin comp-scw-link-base-design-block-link-state-disabled--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 42.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 5.1 );
-  padding-top: calc( var( --scw-spacing-1 ) * 20 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 22.9 );
+  padding-top: calc( var( --scw-spacing-1 ) * 27.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 30.1 );
 }
@@ -150075,26 +152280,26 @@
 @mixin comp-scw-link-base-design-block-link-state-focused--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 28.4 );
+  left: calc( var( --scw-spacing-1 ) * 28.55 );
   width: 80px;
-  top: calc( var( --scw-spacing-1 ) * 20.3 );
+  top: calc( var( --scw-spacing-1 ) * 27.7 );
   height: 47px;
 }
 @mixin comp-scw-link-base-design-block-link-state-focused--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 28.4 );
-  margin-right: calc( var( --scw-spacing-1 ) * 18.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 20.3 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 22.6 );
+  margin-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  margin-right: calc( var( --scw-spacing-1 ) * 18.75 );
+  margin-top: calc( var( --scw-spacing-1 ) * 27.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 29.8 );
 }
 @mixin comp-scw-link-base-design-block-link-state-focused--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 28.4 );
-  padding-right: calc( var( --scw-spacing-1 ) * 18.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 20.3 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 22.6 );
+  padding-left: calc( var( --scw-spacing-1 ) * 28.55 );
+  padding-right: calc( var( --scw-spacing-1 ) * 18.75 );
+  padding-top: calc( var( --scw-spacing-1 ) * 27.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 29.8 );
 }
@@ -150627,7 +152832,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 3.65 );
   width: 43px;
-  top: calc( var( --scw-spacing-1 ) * 26.4 );
+  top: calc( var( --scw-spacing-1 ) * 33.8 );
   height: 25px;
 }
@@ -150635,16 +152840,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 3.65 );
   margin-right: calc( var( --scw-spacing-1 ) * 47.35 );
-  margin-top: calc( var( --scw-spacing-1 ) * 26.4 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 18.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 25.9 );
 }
 @mixin comp-scw-link-base-design-link--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 3.65 );
   padding-right: calc( var( --scw-spacing-1 ) * 47.35 );
-  padding-top: calc( var( --scw-spacing-1 ) * 26.4 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 18.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 25.9 );
 }
@@ -150897,9 +153102,9 @@
   text-align: LEFT;
   font: 400 1.125rem/1.406rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-primary-03 );
   }
 }
@@ -151177,7 +153382,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 16.9 );
   width: 43px;
-  top: calc( var( --scw-spacing-1 ) * 26.5 );
+  top: calc( var( --scw-spacing-1 ) * 33.9 );
   height: 25px;
 }
@@ -151185,16 +153390,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 16.9 );
   margin-right: calc( var( --scw-spacing-1 ) * 34.1 );
-  margin-top: calc( var( --scw-spacing-1 ) * 26.5 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 33.9 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 25.8 );
 }
 @mixin comp-scw-link-base-design-link-state-hover--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 16.9 );
   padding-right: calc( var( --scw-spacing-1 ) * 34.1 );
-  padding-top: calc( var( --scw-spacing-1 ) * 26.5 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 18.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 33.9 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 25.8 );
 }
@@ -151447,9 +153652,9 @@
   text-align: LEFT;
   font: 400 1.125rem/1.406rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar}-07 , var( --scw-color-primary-07 ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-primary-02 ) );
   } @else {
-    color: var( --scw-color-primary-07 );
+    color: var( --scw-color-primary-02 );
   }
 }
@@ -151727,7 +153932,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 43.5 );
   width: 43px;
-  top: calc( var( --scw-spacing-1 ) * 26.4 );
+  top: calc( var( --scw-spacing-1 ) * 33.8 );
   height: 25px;
 }
@@ -151735,16 +153940,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 43.5 );
   margin-right: calc( var( --scw-spacing-1 ) * 7.5 );
-  margin-top: calc( var( --scw-spacing-1 ) * 26.4 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 18.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 25.9 );
 }
 @mixin comp-scw-link-base-design-link-state-disabled--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 43.5 );
   padding-right: calc( var( --scw-spacing-1 ) * 7.5 );
-  padding-top: calc( var( --scw-spacing-1 ) * 26.4 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 18.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 25.9 );
 }
@@ -152277,26 +154482,26 @@
 @mixin comp-scw-link-base-design-link-state-focused--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 30.1 );
+  left: calc( var( --scw-spacing-1 ) * 30.4 );
   width: 43px;
-  top: calc( var( --scw-spacing-1 ) * 26.6 );
+  top: calc( var( --scw-spacing-1 ) * 34 );
   height: 25px;
 }
 @mixin comp-scw-link-base-design-link-state-focused--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 30.1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 20.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 26.6 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 18.5 );
+  margin-left: calc( var( --scw-spacing-1 ) * 30.4 );
+  margin-right: calc( var( --scw-spacing-1 ) * 20.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 34 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 25.7 );
 }
 @mixin comp-scw-link-base-design-link-state-focused--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 30.1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 20.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 26.6 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 18.5 );
+  padding-left: calc( var( --scw-spacing-1 ) * 30.4 );
+  padding-right: calc( var( --scw-spacing-1 ) * 20.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 34 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 25.7 );
 }
@@ -152549,9 +154754,9 @@
   text-align: LEFT;
   font: 400 1.125rem/1.406rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar}-07 , var( --scw-color-primary-07 ) );
+    color: var( #{$themeVar}-02 , var( --scw-color-primary-02 ) );
   } @else {
-    color: var( --scw-color-primary-07 );
+    color: var( --scw-color-primary-02 );
   }
 }
@@ -152829,7 +155034,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 3.7 );
   width: 43px;
-  top: calc( var( --scw-spacing-1 ) * 30.8 );
+  top: calc( var( --scw-spacing-1 ) * 38.2 );
   height: 25px;
 }
@@ -152837,16 +155042,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 3.7 );
   margin-right: calc( var( --scw-spacing-1 ) * 47.3 );
-  margin-top: calc( var( --scw-spacing-1 ) * 30.8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 14.3 );
+  margin-top: calc( var( --scw-spacing-1 ) * 38.2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 21.5 );
 }
 @mixin comp-scw-link-base-design-plain-link--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 3.7 );
   padding-right: calc( var( --scw-spacing-1 ) * 47.3 );
-  padding-top: calc( var( --scw-spacing-1 ) * 30.8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 14.3 );
+  padding-top: calc( var( --scw-spacing-1 ) * 38.2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 21.5 );
 }
@@ -153379,7 +155584,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 16.95 );
   width: 43px;
-  top: calc( var( --scw-spacing-1 ) * 30.9 );
+  top: calc( var( --scw-spacing-1 ) * 38.3 );
   height: 25px;
 }
@@ -153387,16 +155592,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 16.95 );
   margin-right: calc( var( --scw-spacing-1 ) * 34.05 );
-  margin-top: calc( var( --scw-spacing-1 ) * 30.9 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 14.2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 38.3 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 21.4 );
 }
 @mixin comp-scw-link-base-design-plain-link-state-hover--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 16.95 );
   padding-right: calc( var( --scw-spacing-1 ) * 34.05 );
-  padding-top: calc( var( --scw-spacing-1 ) * 30.9 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 14.2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 38.3 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 21.4 );
 }
@@ -153929,7 +156134,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 43.55 );
   width: 43px;
-  top: calc( var( --scw-spacing-1 ) * 30.8 );
+  top: calc( var( --scw-spacing-1 ) * 38.2 );
   height: 25px;
 }
@@ -153937,16 +156142,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 43.55 );
   margin-right: calc( var( --scw-spacing-1 ) * 7.45 );
-  margin-top: calc( var( --scw-spacing-1 ) * 30.8 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 14.3 );
+  margin-top: calc( var( --scw-spacing-1 ) * 38.2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 21.5 );
 }
 @mixin comp-scw-link-base-design-plain-link-state-disabled--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 43.55 );
   padding-right: calc( var( --scw-spacing-1 ) * 7.45 );
-  padding-top: calc( var( --scw-spacing-1 ) * 30.8 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 14.3 );
+  padding-top: calc( var( --scw-spacing-1 ) * 38.2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 21.5 );
 }
@@ -154479,26 +156684,26 @@
 @mixin comp-scw-link-base-design-plain-link-state-focused--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 30.15 );
+  left: calc( var( --scw-spacing-1 ) * 30.4 );
   width: 43px;
-  top: calc( var( --scw-spacing-1 ) * 31 );
+  top: calc( var( --scw-spacing-1 ) * 38.4 );
   height: 25px;
 }
 @mixin comp-scw-link-base-design-plain-link-state-focused--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 30.15 );
-  margin-right: calc( var( --scw-spacing-1 ) * 20.85 );
-  margin-top: calc( var( --scw-spacing-1 ) * 31 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 14.1 );
+  margin-left: calc( var( --scw-spacing-1 ) * 30.4 );
+  margin-right: calc( var( --scw-spacing-1 ) * 20.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 38.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 21.3 );
 }
 @mixin comp-scw-link-base-design-plain-link-state-focused--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 30.15 );
-  padding-right: calc( var( --scw-spacing-1 ) * 20.85 );
-  padding-top: calc( var( --scw-spacing-1 ) * 31 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 14.1 );
+  padding-left: calc( var( --scw-spacing-1 ) * 30.4 );
+  padding-right: calc( var( --scw-spacing-1 ) * 20.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 38.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 21.3 );
 }
@@ -155032,7 +157237,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 3.6 );
   width: 38px;
-  top: calc( var( --scw-spacing-1 ) * 35.4 );
+  top: calc( var( --scw-spacing-1 ) * 42.8 );
   height: 38px;
 }
@@ -155040,16 +157245,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 3.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 47.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 35.4 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 42.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 15.6 );
 }
 @mixin comp-scw-link-base-design-solid-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 3.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 47.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 35.4 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 42.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 15.6 );
 }
@@ -155287,7 +157492,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 43.5 );
   width: 38px;
-  top: calc( var( --scw-spacing-1 ) * 35.4 );
+  top: calc( var( --scw-spacing-1 ) * 42.8 );
   height: 38px;
 }
@@ -155295,16 +157500,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 43.5 );
   margin-right: var( --scw-spacing-8 );
-  margin-top: calc( var( --scw-spacing-1 ) * 35.4 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 42.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 15.6 );
 }
 @mixin comp-scw-link-base-design-solid-icon-state-disabled--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 43.5 );
   padding-right: var( --scw-spacing-8 );
-  padding-top: calc( var( --scw-spacing-1 ) * 35.4 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 42.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 15.6 );
 }
@@ -155542,7 +157747,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 17.2 );
   width: 38px;
-  top: calc( var( --scw-spacing-1 ) * 35.4 );
+  top: calc( var( --scw-spacing-1 ) * 42.8 );
   height: 38px;
 }
@@ -155550,16 +157755,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 17.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 34.3 );
-  margin-top: calc( var( --scw-spacing-1 ) * 35.4 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 42.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 15.6 );
 }
 @mixin comp-scw-link-base-design-solid-icon-state-hover--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 17.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 34.3 );
-  padding-top: calc( var( --scw-spacing-1 ) * 35.4 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 42.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 15.6 );
 }
@@ -155796,26 +158001,26 @@
 @mixin comp-scw-link-base-design-solid-icon-state-focused--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 30.1 );
+  left: calc( var( --scw-spacing-1 ) * 30.65 );
   width: 38px;
-  top: calc( var( --scw-spacing-1 ) * 35.4 );
+  top: calc( var( --scw-spacing-1 ) * 42.8 );
   height: 38px;
 }
 @mixin comp-scw-link-base-design-solid-icon-state-focused--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 30.1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 21.4 );
-  margin-top: calc( var( --scw-spacing-1 ) * 35.4 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+  margin-left: calc( var( --scw-spacing-1 ) * 30.65 );
+  margin-right: calc( var( --scw-spacing-1 ) * 20.85 );
+  margin-top: calc( var( --scw-spacing-1 ) * 42.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 15.6 );
 }
 @mixin comp-scw-link-base-design-solid-icon-state-focused--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 30.1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 21.4 );
-  padding-top: calc( var( --scw-spacing-1 ) * 35.4 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+  padding-left: calc( var( --scw-spacing-1 ) * 30.65 );
+  padding-right: calc( var( --scw-spacing-1 ) * 20.85 );
+  padding-top: calc( var( --scw-spacing-1 ) * 42.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 15.6 );
 }
@@ -156053,7 +158258,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 3.6 );
   width: 38px;
-  top: calc( var( --scw-spacing-1 ) * 41.2 );
+  top: calc( var( --scw-spacing-1 ) * 48.6 );
   height: 38px;
 }
@@ -156061,16 +158266,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 3.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 47.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 41.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 2.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 48.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 9.8 );
 }
 @mixin comp-scw-link-base-design-icon--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 3.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 47.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 41.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 2.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 48.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 9.8 );
 }
@@ -156308,7 +158513,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 43.6 );
   width: 38px;
-  top: calc( var( --scw-spacing-1 ) * 41.2 );
+  top: calc( var( --scw-spacing-1 ) * 48.6 );
   height: 38px;
 }
@@ -156316,16 +158521,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 43.6 );
   margin-right: calc( var( --scw-spacing-1 ) * 7.9 );
-  margin-top: calc( var( --scw-spacing-1 ) * 41.2 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 2.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 48.6 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 9.8 );
 }
 @mixin comp-scw-link-base-design-icon-state-disabled--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 43.6 );
   padding-right: calc( var( --scw-spacing-1 ) * 7.9 );
-  padding-top: calc( var( --scw-spacing-1 ) * 41.2 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 2.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 48.6 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 9.8 );
 }
@@ -156563,7 +158768,7 @@
   position: absolute;
   left: calc( var( --scw-spacing-1 ) * 17.2 );
   width: 38px;
-  top: calc( var( --scw-spacing-1 ) * 41.3 );
+  top: calc( var( --scw-spacing-1 ) * 48.7 );
   height: 38px;
 }
@@ -156571,16 +158776,16 @@
   display: inline-block;
   margin-left: calc( var( --scw-spacing-1 ) * 17.2 );
   margin-right: calc( var( --scw-spacing-1 ) * 34.3 );
-  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 2.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 48.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 9.7 );
 }
 @mixin comp-scw-link-base-design-icon-state-hover--html-autolayout-padding {
   display: inline-block;
   padding-left: calc( var( --scw-spacing-1 ) * 17.2 );
   padding-right: calc( var( --scw-spacing-1 ) * 34.3 );
-  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 2.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 48.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 9.7 );
 }
@@ -156817,26 +159022,26 @@
 @mixin comp-scw-link-base-design-icon-state-focused--absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 30.1 );
+  left: calc( var( --scw-spacing-1 ) * 30.65 );
   width: 38px;
-  top: calc( var( --scw-spacing-1 ) * 41.3 );
+  top: calc( var( --scw-spacing-1 ) * 48.7 );
   height: 38px;
 }
 @mixin comp-scw-link-base-design-icon-state-focused--html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 30.1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 21.4 );
-  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 2.5 );
+  margin-left: calc( var( --scw-spacing-1 ) * 30.65 );
+  margin-right: calc( var( --scw-spacing-1 ) * 20.85 );
+  margin-top: calc( var( --scw-spacing-1 ) * 48.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 9.7 );
 }
 @mixin comp-scw-link-base-design-icon-state-focused--html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 30.1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 21.4 );
-  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 2.5 );
+  padding-left: calc( var( --scw-spacing-1 ) * 30.65 );
+  padding-right: calc( var( --scw-spacing-1 ) * 20.85 );
+  padding-top: calc( var( --scw-spacing-1 ) * 48.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 9.7 );
 }
@@ -158580,9 +160785,9 @@
   text-align: LEFT;
   font: 400 0.875rem/1.094rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-primary-03 );
   }
 }
@@ -158700,9 +160905,9 @@
   text-align: LEFT;
   font: 400 1.125rem/1.406rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-primary-03 );
   }
 }
@@ -158820,9 +161025,9 @@
   text-align: LEFT;
   font: 400 1.25rem/1.563rem 'Proxima Nova';
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-primary-03 );
   }
 }
@@ -160119,9 +162324,9 @@
   text-align: LEFT;
   font: var( --scw-type-text-bold-04-font );
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-primary-03 );
   }
   flex: 1;
 }
@@ -160228,9 +162433,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary-03 );
   }
 }
@@ -161524,9 +163729,9 @@
   text-align: CENTER;
   font: var( --scw-type-text-bold-04-font );
   @if $themeVar {
-    color: var( #{$themeVar} , var( --scw-color-primary ) );
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
   } @else {
-    color: var( --scw-color-primary );
+    color: var( --scw-color-primary-03 );
   }
 }
@@ -161632,9 +163837,9 @@
   $borderThemeVar: false
 ) {
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar}-04 , var( --scw-color-primary-04 ) );
+    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );
   } @else {
-    background-color: var( --scw-color-primary-04 );
+    background-color: var( --scw-color-primary-03 );
   }
 }