scu-web-components 1.0.0 → 1.1.0

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_size-small-container-scw-icon-icon-vector-vars.scss

@@ -2,8 +2,8 @@
 
 $background-color: var( --scw-color-grey-02 );
 $blend-mode: NORMAL;
-$width: 44.6429px;
-$height: 39.5416px;
+$width: 35.7143px;
+$height: 31.6333px;
 $constraint-horizontal: STRETCH;
 $constraint-vertical: STRETCH;
 $constrain-proportions: false;
@@ -14,12 +14,12 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: MIN;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 0.5228515625 );
+$top: calc( var( --scw-spacing-1 ) * 0.418359375 );
 $top-percent: 50%;
-$bottom: calc( var( --scw-spacing-1 ) * 0.5229843139648438 );
-$left: calc( var( --scw-spacing-1 ) * 0.26787109375 );
+$bottom: calc( var( --scw-spacing-1 ) * 0.41830921173095703 );
+$left: calc( var( --scw-spacing-1 ) * 0.2142578125 );
 $left-percent: 50%;
-$right: calc( var( --scw-spacing-1 ) * 0.26784286499023435 );
+$right: calc( var( --scw-spacing-1 ) * 0.21431312561035157 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_size-small-container-scw-icon-mixins.scss

@@ -13,16 +13,16 @@
 }
 
 @mixin sizing {
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
 }
 
 @mixin width {
-  width: 50px;
+  width: 40px;
 }
 
 @mixin height {
-  height: 50px;
+  height: 40px;
 }
 
 @mixin padding {
@@ -42,16 +42,16 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 4.1 );
-  margin-right: calc( var( --scw-spacing-1 ) * 4.1 );
+  margin-left: calc( var( --scw-spacing-1 ) * 3.15 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.15 );
   margin-top: 0px;
   margin-bottom: calc( var( --scw-spacing-1 ) * 2.3 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 4.1 );
-  padding-right: calc( var( --scw-spacing-1 ) * 4.1 );
+  padding-left: calc( var( --scw-spacing-1 ) * 3.15 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.15 );
   padding-top: 0px;
   padding-bottom: calc( var( --scw-spacing-1 ) * 2.3 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_size-small-container-scw-icon-vars.scss

@@ -1,8 +1,8 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 50px;
-$height: 50px;
+$width: 40px;
+$height: 40px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -14,11 +14,11 @@ $item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 0;
 $top: 0px;
-$top-percent: 34.25%;
+$top-percent: 31.75%;
 $bottom: calc( var( --scw-spacing-1 ) * 2.3 );
-$left: calc( var( --scw-spacing-1 ) * 4.1 );
+$left: calc( var( --scw-spacing-1 ) * 3.15 );
 $left-percent: 50%;
-$right: calc( var( --scw-spacing-1 ) * 4.1 );
+$right: calc( var( --scw-spacing-1 ) * 3.15 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_size-small-container-vars.scss

@@ -1,8 +1,8 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 132px;
-$height: 73px;
+$width: 103px;
+$height: 63px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -14,8 +14,8 @@ $item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 0;
 $top: 0px;
-$top-percent: 50%;
-$bottom: 0px;
+$top-percent: 46.32%;
+$bottom: calc( var( --scw-spacing-1 ) * 0.5 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_size-small-mixins.scss

@@ -20,23 +20,23 @@
 }
 
 @mixin sizing {
-  width: 132px;
-  height: 73px;
+  width: 103px;
+  height: 68px;
 }
 
 @mixin width {
-  width: 132px;
+  width: 103px;
 }
 
 @mixin height {
-  height: 73px;
+  height: 68px;
 }
 
 @mixin padding {
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
 }
 
 @mixin figma-autolayout { 
@@ -47,7 +47,7 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
   & > *:not(:last-child) { 
         margin-bottom: 0px; 
         --margin-bottom: 0px; 
@@ -56,24 +56,24 @@
 
 @mixin absolute-layout {
   position: absolute;
-  left: calc( var( --scw-spacing-1 ) * 19.25 );
-  width: 132px;
-  top: calc( var( --scw-spacing-1 ) * 9.15 );
-  height: 73px; 
+  left: calc( var( --scw-spacing-1 ) * 35.35 );
+  width: 103px;
+  top: calc( var( --scw-spacing-1 ) * 15 );
+  height: 68px; 
 }
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 19.25 );
-  margin-right: calc( var( --scw-spacing-1 ) * 52.55 );
-  margin-top: calc( var( --scw-spacing-1 ) * 9.15 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 49.25 );
+  margin-left: calc( var( --scw-spacing-1 ) * 35.35 );
+  margin-right: calc( var( --scw-spacing-1 ) * 22.45 );
+  margin-top: calc( var( --scw-spacing-1 ) * 15 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 56.3 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 19.25 );
-  padding-right: calc( var( --scw-spacing-1 ) * 52.55 );
-  padding-top: calc( var( --scw-spacing-1 ) * 9.15 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 49.25 );
+  padding-left: calc( var( --scw-spacing-1 ) * 35.35 );
+  padding-right: calc( var( --scw-spacing-1 ) * 22.45 );
+  padding-top: calc( var( --scw-spacing-1 ) * 15 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 56.3 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_size-small-vars.scss

@@ -4,8 +4,8 @@ $background-color: rgba(0,0,0,0);
 $stroke-color: var( --scw-color-grey-02 );
 $stroke-weight: 0px;
 $stroke-align: INSIDE;
-$width: 132px;
-$height: 73px;
+$width: 103px;
+$height: 68px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -16,13 +16,13 @@ $counter-axis-align-items: CENTER;
 $item-spacing: 0px;
 $layout-align: MIN;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 9.15 );
-$top-percent: 19.48%;
-$bottom: calc( var( --scw-spacing-1 ) * 49.25 );
-$left: calc( var( --scw-spacing-1 ) * 19.25 );
-$left-percent: 30.41%;
-$right: calc( var( --scw-spacing-1 ) * 52.55 );
+$top: calc( var( --scw-spacing-1 ) * 15 );
+$top-percent: 23.56%;
+$bottom: calc( var( --scw-spacing-1 ) * 56.3 );
+$left: calc( var( --scw-spacing-1 ) * 35.35 );
+$left-percent: 59.47%;
+$right: calc( var( --scw-spacing-1 ) * 22.45 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;
-$padding-bottom: 0px;
+$padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-container-label-menu-item-mixins.scss

@@ -39,16 +39,16 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: var( --scw-spacing-3 );
-  margin-right: var( --scw-spacing-3 );
+  margin-left: var( --scw-spacing-2 );
+  margin-right: var( --scw-spacing-2 );
   margin-top: 0px;
   margin-bottom: 0px;
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: var( --scw-spacing-3 );
-  padding-right: var( --scw-spacing-3 );
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
   padding-top: 0px;
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-container-label-menu-item-vars.scss

@@ -26,6 +26,6 @@ $layout-grow: 0;
 $top: 0px;
 $top-percent: 50%;
 $bottom: 0px;
-$left: var( --scw-spacing-3 );
+$left: var( --scw-spacing-2 );
 $left-percent: 50%;
-$right: var( --scw-spacing-3 );
+$right: var( --scw-spacing-2 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-container-label-mixins.scss

@@ -13,12 +13,12 @@
 }
 
 @mixin sizing {
-  width: 144px;
+  width: 124px;
   height: 27px;
 }
 
 @mixin width {
-  width: 144px;
+  width: 124px;
 }
 
 @mixin height {
@@ -26,8 +26,8 @@
 }
 
 @mixin padding {
-  padding-left: var( --scw-spacing-3 );
-  padding-right: var( --scw-spacing-3 );
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
   padding-top: 0px;
   padding-bottom: 0px;
 }
@@ -37,8 +37,8 @@
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-  padding-left: var( --scw-spacing-3 );
-  padding-right: var( --scw-spacing-3 );
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
   padding-top: 0px;
   padding-bottom: 0px;
   & > *:not(:last-child) { 

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-container-label-vars.scss

@@ -1,7 +1,7 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 144px;
+$width: 124px;
 $height: 27px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -19,7 +19,7 @@ $bottom: 0px;
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;
-$padding-left: var( --scw-spacing-3 );
-$padding-right: var( --scw-spacing-3 );
+$padding-left: var( --scw-spacing-2 );
+$padding-right: var( --scw-spacing-2 );
 $padding-top: 0px;
 $padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-container-mixins.scss

@@ -13,12 +13,12 @@
 }
 
 @mixin sizing {
-  width: 144px;
+  width: 124px;
   height: 77px;
 }
 
 @mixin width {
-  width: 144px;
+  width: 124px;
 }
 
 @mixin height {
@@ -56,7 +56,7 @@
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0px;
-  margin-bottom: 0px;
+  margin-bottom: var( --scw-spacing-1 );
 }
 
 @mixin html-autolayout-padding {
@@ -64,5 +64,5 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: 0px;
+  padding-bottom: var( --scw-spacing-1 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-container-scw-icon-mixins.scss

@@ -42,16 +42,16 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: calc( var( --scw-spacing-1 ) * 4.7 );
-  margin-right: calc( var( --scw-spacing-1 ) * 4.7 );
+  margin-left: calc( var( --scw-spacing-1 ) * 3.7 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.7 );
   margin-top: 0px;
   margin-bottom: calc( var( --scw-spacing-1 ) * 2.7 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: calc( var( --scw-spacing-1 ) * 4.7 );
-  padding-right: calc( var( --scw-spacing-1 ) * 4.7 );
+  padding-left: calc( var( --scw-spacing-1 ) * 3.7 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.7 );
   padding-top: 0px;
   padding-bottom: calc( var( --scw-spacing-1 ) * 2.7 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-container-scw-icon-vars.scss

@@ -16,9 +16,9 @@ $layout-grow: 0;
 $top: 0px;
 $top-percent: 32.47%;
 $bottom: calc( var( --scw-spacing-1 ) * 2.7 );
-$left: calc( var( --scw-spacing-1 ) * 4.7 );
+$left: calc( var( --scw-spacing-1 ) * 3.7 );
 $left-percent: 50%;
-$right: calc( var( --scw-spacing-1 ) * 4.7 );
+$right: calc( var( --scw-spacing-1 ) * 3.7 );
 $padding-left: 0px;
 $padding-right: 0px;
 $padding-top: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-container-vars.scss

@@ -1,7 +1,7 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 144px;
+$width: 124px;
 $height: 77px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
@@ -14,8 +14,8 @@ $item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 0;
 $top: 0px;
-$top-percent: 50%;
-$bottom: 0px;
+$top-percent: 44.25%;
+$bottom: var( --scw-spacing-1 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-mixins.scss

@@ -13,23 +13,23 @@
 }
 
 @mixin sizing {
-  width: 144px;
-  height: 77px;
+  width: 124px;
+  height: 87px;
 }
 
 @mixin width {
-  width: 144px;
+  width: 124px;
 }
 
 @mixin height {
-  height: 77px;
+  height: 87px;
 }
 
 @mixin padding {
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: 0px;
+  padding-bottom: var( --scw-spacing-1 );
 }
 
 @mixin figma-autolayout { 
@@ -40,7 +40,7 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: 0px;
+  padding-bottom: var( --scw-spacing-1 );
   & > *:not(:last-child) { 
         margin-bottom: 0px; 
         --margin-bottom: 0px; 
@@ -49,24 +49,24 @@
 
 @mixin absolute-layout {
   position: absolute;
-  left: var( --scw-spacing-2 );
-  width: 144px;
-  top: calc( var( --scw-spacing-1 ) * 24.233984375 );
-  height: 77px; 
+  left: calc( var( --scw-spacing-1 ) * 19 );
+  width: 124px;
+  top: calc( var( --scw-spacing-1 ) * 4.3228515625 );
+  height: 87px; 
 }
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: var( --scw-spacing-2 );
-  margin-right: calc( var( --scw-spacing-1 ) * 68.6 );
-  margin-top: calc( var( --scw-spacing-1 ) * 24.233984375 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 33.766015625 );
+  margin-left: calc( var( --scw-spacing-1 ) * 19 );
+  margin-right: calc( var( --scw-spacing-1 ) * 36.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 4.3228515625 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 65.0771484375 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: var( --scw-spacing-2 );
-  padding-right: calc( var( --scw-spacing-1 ) * 68.6 );
-  padding-top: calc( var( --scw-spacing-1 ) * 24.233984375 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 33.766015625 );
+  padding-left: calc( var( --scw-spacing-1 ) * 19 );
+  padding-right: calc( var( --scw-spacing-1 ) * 36.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 4.3228515625 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 65.0771484375 );
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-size-small-container-label-menu-item-mixins.scss

@@ -39,16 +39,16 @@
 
 @mixin html-autolayout-margins {
   display: inline-block;
-  margin-left: var( --scw-spacing-3 );
-  margin-right: var( --scw-spacing-3 );
+  margin-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.5 );
   margin-top: 0px;
   margin-bottom: 0px;
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
-  padding-left: var( --scw-spacing-3 );
-  padding-right: var( --scw-spacing-3 );
+  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
   padding-top: 0px;
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-size-small-container-label-menu-item-vars.scss

@@ -26,6 +26,6 @@ $layout-grow: 0;
 $top: 0px;
 $top-percent: 50%;
 $bottom: 0px;
-$left: var( --scw-spacing-3 );
+$left: calc( var( --scw-spacing-1 ) * 1.5 );
 $left-percent: 50%;
-$right: var( --scw-spacing-3 );
+$right: calc( var( --scw-spacing-1 ) * 1.5 );

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-size-small-container-label-mixins.scss

@@ -13,12 +13,12 @@
 }
 
 @mixin sizing {
-  width: 130px;
+  width: 100px;
   height: 23px;
 }
 
 @mixin width {
-  width: 130px;
+  width: 100px;
 }
 
 @mixin height {
@@ -26,8 +26,8 @@
 }
 
 @mixin padding {
-  padding-left: var( --scw-spacing-3 );
-  padding-right: var( --scw-spacing-3 );
+  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
   padding-top: 0px;
   padding-bottom: 0px;
 }
@@ -37,8 +37,8 @@
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-  padding-left: var( --scw-spacing-3 );
-  padding-right: var( --scw-spacing-3 );
+  padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
   padding-top: 0px;
   padding-bottom: 0px;
   & > *:not(:last-child) { 
@@ -48,18 +48,14 @@
 }
 
 @mixin absolute-layout {
-  position: absolute;
-  left: 0px;
-  width: 130px;
-  top: var( --scw-spacing-5 );
-  height: 23px; 
+   
 }
 
 @mixin html-autolayout-margins {
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: var( --scw-spacing-5 );
+  margin-top: var( --scw-spacing-4 );
   margin-bottom: 0px;
 }
 
@@ -67,6 +63,6 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: var( --scw-spacing-5 );
+  padding-top: var( --scw-spacing-4 );
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-size-small-container-label-vars.scss

@@ -1,25 +1,25 @@
 
 
 $background-color: rgba(0,0,0,0);
-$width: 130px;
+$width: 100px;
 $height: 23px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
-$layout-context: ABSOLUTE;
+$layout-context: FLEX;
 $layout-mode: VERTICAL;
 $primary-axis-align-items: CENTER;
 $counter-axis-align-items: CENTER;
 $item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );
-$layout-align: MIN;
+$layout-align: INHERIT;
 $layout-grow: 0;
-$top: var( --scw-spacing-5 );
-$top-percent: 84.25%;
+$top: var( --scw-spacing-4 );
+$top-percent: 81.75%;
 $bottom: 0px;
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;
-$padding-left: var( --scw-spacing-3 );
-$padding-right: var( --scw-spacing-3 );
+$padding-left: calc( var( --scw-spacing-1 ) * 1.5 );
+$padding-right: calc( var( --scw-spacing-1 ) * 1.5 );
 $padding-top: 0px;
 $padding-bottom: 0px;

package/dist/tokens/segments/comp-scw-horizontal-nav-item/_state-default-size-small-container-mixins.scss

@@ -13,16 +13,16 @@
 }
 
 @mixin sizing {
-  width: 130px;
-  height: 73px;
+  width: 100px;
+  height: 63px;
 }
 
 @mixin width {
-  width: 130px;
+  width: 100px;
 }
 
 @mixin height {
-  height: 73px;
+  height: 63px;
 }
 
 @mixin padding {
@@ -33,7 +33,18 @@
 }
 
 @mixin figma-autolayout { 
-   
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-bottom: 0px; 
+        --margin-bottom: 0px; 
+      } 
 }
 
 @mixin absolute-layout {
@@ -45,7 +56,7 @@
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0px;
-  margin-bottom: 0px;
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
 }
 
 @mixin html-autolayout-padding {
@@ -53,5 +64,5 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
 }