@studio-helga/once-ui-core 1.7.8

package/dist/styles/position.scss

@@ -0,0 +1,1549 @@
+@use "../styles/breakpoints.scss" as breakpoints;
+
+.position-relative {
+  position: relative;
+}
+
+.position-fixed {
+  position: fixed;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.position-sticky {
+  position: sticky;
+}
+
+.position-static {
+  position: static;
+}
+
+.top-0 { 
+  top: 0;
+}
+  
+.left-0 { 
+  left: 0;
+}
+  
+.bottom-0 { 
+  bottom: 0;
+}
+
+.right-0 { 
+  right: 0;
+}
+
+.top-1 { 
+  top: var(--static-space-1);
+}
+
+.left-1 { 
+  left: var(--static-space-1);
+}
+
+.bottom-1 { 
+  bottom: var(--static-space-1);
+}
+
+.right-1 { 
+  right: var(--static-space-1);
+}
+
+.top-2 { 
+  top: var(--static-space-2);
+}
+
+.left-2 { 
+  left: var(--static-space-2);
+}
+
+.bottom-2 { 
+  bottom: var(--static-space-2);
+}
+
+.right-2 { 
+  right: var(--static-space-2);
+}
+
+.top-4 { 
+  top: var(--static-space-4);
+}
+
+.left-4 { 
+  left: var(--static-space-4);
+}
+
+.bottom-4 { 
+  bottom: var(--static-space-4);
+}
+
+.right-4 { 
+  right: var(--static-space-4);
+}
+
+.top-8 { 
+  top: var(--static-space-8);
+}
+
+.left-8 { 
+  left: var(--static-space-8);
+}
+
+.bottom-8 { 
+  bottom: var(--static-space-8);
+}
+
+.right-8 { 
+  right: var(--static-space-8);
+}
+
+.top-12 { 
+  top: var(--static-space-12);
+}
+
+.left-12 { 
+  left: var(--static-space-12);
+}
+
+.bottom-12 { 
+  bottom: var(--static-space-12);
+}
+
+.right-12 { 
+  right: var(--static-space-12);
+}
+
+.top-16 { 
+  top: var(--static-space-16);
+}
+
+.left-16 { 
+  left: var(--static-space-16);
+}
+
+.bottom-16 { 
+  bottom: var(--static-space-16);
+}
+
+.right-16 { 
+  right: var(--static-space-16);
+}
+
+.top-20 { 
+  top: var(--static-space-20);
+}
+
+.left-20 { 
+  left: var(--static-space-20);
+}
+
+.bottom-20 { 
+  bottom: var(--static-space-20);
+}
+
+.right-20 { 
+  right: var(--static-space-20);
+}
+
+.top-24 { 
+  top: var(--static-space-24);
+}
+
+.left-24 { 
+  left: var(--static-space-24);
+}
+
+.bottom-24 { 
+  bottom: var(--static-space-24);
+}
+
+.right-24 { 
+  right: var(--static-space-24);
+}
+
+.top-32 { 
+  top: var(--static-space-32);
+}
+
+.left-32 { 
+  left: var(--static-space-32);
+}
+
+.bottom-32 { 
+  bottom: var(--static-space-32);
+}
+
+.right-32 { 
+  right: var(--static-space-32);
+}
+
+.top-40 { 
+  top: var(--static-space-40);
+}
+
+.left-40 { 
+  left: var(--static-space-40);
+}
+
+.bottom-40 { 
+  bottom: var(--static-space-40);
+}
+
+.right-40 { 
+  right: var(--static-space-40);
+}
+
+.top-48 { 
+  top: var(--static-space-48);
+}
+
+.left-48 { 
+  left: var(--static-space-48);
+}
+
+.bottom-48 { 
+  bottom: var(--static-space-48);
+}
+
+.right-48 { 
+  right: var(--static-space-48);
+}
+
+.top-56 { 
+  top: var(--static-space-56);
+}
+
+.left-56 { 
+  left: var(--static-space-56);
+}
+
+.bottom-56 { 
+  bottom: var(--static-space-56);
+}
+
+.right-56 { 
+  right: var(--static-space-56);
+}
+
+.top-64 { 
+  top: var(--static-space-64);
+}
+
+.left-64 { 
+  left: var(--static-space-64);
+}
+
+.bottom-64 { 
+  bottom: var(--static-space-64);
+}
+
+.right-64 { 
+  right: var(--static-space-64);
+}
+
+.top-80 { 
+  top: var(--static-space-80);
+}
+
+.left-80 { 
+  left: var(--static-space-80);
+}
+
+.bottom-80 { 
+  bottom: var(--static-space-80);
+}
+
+.right-80 { 
+  right: var(--static-space-80);
+}
+
+.top-104 { 
+  top: var(--static-space-104); 
+}
+
+.left-104 { 
+  left: var(--static-space-104); 
+}
+
+.bottom-104 { 
+  bottom: var(--static-space-104); 
+}
+
+.right-104 { 
+  right: var(--static-space-104); 
+}
+
+.top-128 { 
+  top: var(--static-space-128); 
+}
+
+.left-128 { 
+  left: var(--static-space-128); 
+}
+
+.bottom-128 { 
+  bottom: var(--static-space-128); 
+}
+
+.right-128 { 
+  right: var(--static-space-128); 
+}
+
+.top-160 { 
+  top: var(--static-space-160); 
+}
+
+.left-160 { 
+  left: var(--static-space-160); 
+}
+
+.bottom-160 { 
+  bottom: var(--static-space-160); 
+}
+
+.right-160 { 
+  right: var(--static-space-160);
+}
+
+@include breakpoints.l {
+  .l-position-relative {
+    position: relative;
+  }
+  
+  .l-position-fixed {
+    position: fixed;
+  }
+  
+  .l-position-absolute {
+    position: absolute;
+  }
+  
+  .l-position-sticky {
+    position: sticky;
+  }
+  
+  .l-position-static {
+    position: static;
+  }
+  
+  .l-top-0 { 
+    top: 0;
+  }
+    
+  .l-left-0 { 
+    left: 0;
+  }
+    
+  .l-bottom-0 { 
+    bottom: 0;
+  }
+  
+  .l-right-0 { 
+    right: 0;
+  }
+  
+  .l-top-1 { 
+    top: var(--static-space-1);
+  }
+  
+  .l-left-1 { 
+    left: var(--static-space-1);
+  }
+  
+  .l-bottom-1 { 
+    bottom: var(--static-space-1);
+  }
+  
+  .l-right-1 { 
+    right: var(--static-space-1);
+  }
+  
+  .l-top-2 { 
+    top: var(--static-space-2);
+  }
+  
+  .l-left-2 { 
+    left: var(--static-space-2);
+  }
+  
+  .l-bottom-2 { 
+    bottom: var(--static-space-2);
+  }
+  
+  .l-right-2 { 
+    right: var(--static-space-2);
+  }
+  
+  .l-top-4 { 
+    top: var(--static-space-4);
+  }
+  
+  .l-left-4 { 
+    left: var(--static-space-4);
+  }
+  
+  .l-bottom-4 { 
+    bottom: var(--static-space-4);
+  }
+  
+  .l-right-4 { 
+    right: var(--static-space-4);
+  }
+  
+  .l-top-8 { 
+    top: var(--static-space-8);
+  }
+  
+  .l-left-8 { 
+    left: var(--static-space-8);
+  }
+  
+  .l-bottom-8 { 
+    bottom: var(--static-space-8);
+  }
+  
+  .l-right-8 { 
+    right: var(--static-space-8);
+  }
+  
+  .l-top-12 { 
+    top: var(--static-space-12);
+  }
+  
+  .l-left-12 { 
+    left: var(--static-space-12);
+  }
+  
+  .l-bottom-12 { 
+    bottom: var(--static-space-12);
+  }
+  
+  .l-right-12 { 
+    right: var(--static-space-12);
+  }
+  
+  .l-top-16 { 
+    top: var(--static-space-16);
+  }
+  
+  .l-left-16 { 
+    left: var(--static-space-16);
+  }
+  
+  .l-bottom-16 { 
+    bottom: var(--static-space-16);
+  }
+  
+  .l-right-16 { 
+    right: var(--static-space-16);
+  }
+  
+  .l-top-20 { 
+    top: var(--static-space-20);
+  }
+  
+  .l-left-20 { 
+    left: var(--static-space-20);
+  }
+  
+  .l-bottom-20 { 
+    bottom: var(--static-space-20);
+  }
+  
+  .l-right-20 { 
+    right: var(--static-space-20);
+  }
+  
+  .l-top-24 { 
+    top: var(--static-space-24);
+  }
+  
+  .l-left-24 { 
+    left: var(--static-space-24);
+  }
+  
+  .l-bottom-24 { 
+    bottom: var(--static-space-24);
+  }
+  
+  .l-right-24 { 
+    right: var(--static-space-24);
+  }
+  
+  .l-top-32 { 
+    top: var(--static-space-32);
+  }
+  
+  .l-left-32 { 
+    left: var(--static-space-32);
+  }
+  
+  .l-bottom-32 { 
+    bottom: var(--static-space-32);
+  }
+  
+  .l-right-32 { 
+    right: var(--static-space-32);
+  }
+  
+  .l-top-40 { 
+    top: var(--static-space-40);
+  }
+  
+  .l-left-40 { 
+    left: var(--static-space-40);
+  }
+  
+  .l-bottom-40 { 
+    bottom: var(--static-space-40);
+  }
+  
+  .l-right-40 { 
+    right: var(--static-space-40);
+  }
+  
+  .l-top-48 { 
+    top: var(--static-space-48);
+  }
+  
+  .l-left-48 { 
+    left: var(--static-space-48);
+  }
+  
+  .l-bottom-48 { 
+    bottom: var(--static-space-48);
+  }
+  
+  .l-right-48 { 
+    right: var(--static-space-48);
+  }
+  
+  .l-top-56 { 
+    top: var(--static-space-56);
+  }
+  
+  .l-left-56 { 
+    left: var(--static-space-56);
+  }
+  
+  .l-bottom-56 { 
+    bottom: var(--static-space-56);
+  }
+  
+  .l-right-56 { 
+    right: var(--static-space-56);
+  }
+  
+  .l-top-64 { 
+    top: var(--static-space-64);
+  }
+  
+  .l-left-64 { 
+    left: var(--static-space-64);
+  }
+  
+  .l-bottom-64 { 
+    bottom: var(--static-space-64);
+  }
+  
+  .l-right-64 { 
+    right: var(--static-space-64);
+  }
+  
+  .l-top-80 { 
+    top: var(--static-space-80);
+  }
+  
+  .l-left-80 { 
+    left: var(--static-space-80);
+  }
+  
+  .l-bottom-80 { 
+    bottom: var(--static-space-80);
+  }
+  
+  .l-right-80 { 
+    right: var(--static-space-80);
+  }
+  
+  .l-top-104 { 
+    top: var(--static-space-104); 
+  }
+  
+  .l-left-104 { 
+    left: var(--static-space-104); 
+  }
+  
+  .l-bottom-104 { 
+    bottom: var(--static-space-104); 
+  }
+  
+  .l-right-104 { 
+    right: var(--static-space-104); 
+  }
+  
+  .l-top-128 { 
+    top: var(--static-space-128); 
+  }
+  
+  .l-left-128 { 
+    left: var(--static-space-128); 
+  }
+  
+  .l-bottom-128 { 
+    bottom: var(--static-space-128); 
+  }
+  
+  .l-right-128 { 
+    right: var(--static-space-128); 
+  }
+  
+  .l-top-160 { 
+    top: var(--static-space-160); 
+  }
+  
+  .l-left-160 { 
+    left: var(--static-space-160); 
+  }
+  
+  .l-bottom-160 { 
+    bottom: var(--static-space-160); 
+  }
+  
+  .l-right-160 { 
+    right: var(--static-space-160);
+  }
+}
+
+@include breakpoints.m {
+  .m-position-relative {
+    position: relative;
+  }
+  
+  .m-position-fixed {
+    position: fixed;
+  }
+  
+  .m-position-absolute {
+    position: absolute;
+  }
+  
+  .m-position-sticky {
+    position: sticky;
+  }
+  
+  .m-position-static {
+    position: static;
+  }
+  
+  .m-top-0 { 
+    top: 0;
+  }
+    
+  .m-left-0 { 
+    left: 0;
+  }
+    
+  .m-bottom-0 { 
+    bottom: 0;
+  }
+  
+  .m-right-0 { 
+    right: 0;
+  }
+  
+  .m-top-1 { 
+    top: var(--static-space-1);
+  }
+  
+  .m-left-1 { 
+    left: var(--static-space-1);
+  }
+  
+  .m-bottom-1 { 
+    bottom: var(--static-space-1);
+  }
+  
+  .m-right-1 { 
+    right: var(--static-space-1);
+  }
+  
+  .m-top-2 { 
+    top: var(--static-space-2);
+  }
+  
+  .m-left-2 { 
+    left: var(--static-space-2);
+  }
+  
+  .m-bottom-2 { 
+    bottom: var(--static-space-2);
+  }
+  
+  .m-right-2 { 
+    right: var(--static-space-2);
+  }
+  
+  .m-top-4 { 
+    top: var(--static-space-4);
+  }
+  
+  .m-left-4 { 
+    left: var(--static-space-4);
+  }
+  
+  .m-bottom-4 { 
+    bottom: var(--static-space-4);
+  }
+  
+  .m-right-4 { 
+    right: var(--static-space-4);
+  }
+  
+  .m-top-8 { 
+    top: var(--static-space-8);
+  }
+  
+  .m-left-8 { 
+    left: var(--static-space-8);
+  }
+  
+  .m-bottom-8 { 
+    bottom: var(--static-space-8);
+  }
+  
+  .m-right-8 { 
+    right: var(--static-space-8);
+  }
+  
+  .m-top-12 { 
+    top: var(--static-space-12);
+  }
+  
+  .m-left-12 { 
+    left: var(--static-space-12);
+  }
+  
+  .m-bottom-12 { 
+    bottom: var(--static-space-12);
+  }
+  
+  .m-right-12 { 
+    right: var(--static-space-12);
+  }
+  
+  .m-top-16 { 
+    top: var(--static-space-16);
+  }
+  
+  .m-left-16 { 
+    left: var(--static-space-16);
+  }
+  
+  .m-bottom-16 { 
+    bottom: var(--static-space-16);
+  }
+  
+  .m-right-16 { 
+    right: var(--static-space-16);
+  }
+  
+  .m-top-20 { 
+    top: var(--static-space-20);
+  }
+  
+  .m-left-20 { 
+    left: var(--static-space-20);
+  }
+  
+  .m-bottom-20 { 
+    bottom: var(--static-space-20);
+  }
+  
+  .m-right-20 { 
+    right: var(--static-space-20);
+  }
+  
+  .m-top-24 { 
+    top: var(--static-space-24);
+  }
+  
+  .m-left-24 { 
+    left: var(--static-space-24);
+  }
+  
+  .m-bottom-24 { 
+    bottom: var(--static-space-24);
+  }
+  
+  .m-right-24 { 
+    right: var(--static-space-24);
+  }
+  
+  .m-top-32 { 
+    top: var(--static-space-32);
+  }
+  
+  .m-left-32 { 
+    left: var(--static-space-32);
+  }
+  
+  .m-bottom-32 { 
+    bottom: var(--static-space-32);
+  }
+  
+  .m-right-32 { 
+    right: var(--static-space-32);
+  }
+  
+  .m-top-40 { 
+    top: var(--static-space-40);
+  }
+  
+  .m-left-40 { 
+    left: var(--static-space-40);
+  }
+  
+  .m-bottom-40 { 
+    bottom: var(--static-space-40);
+  }
+  
+  .m-right-40 { 
+    right: var(--static-space-40);
+  }
+  
+  .m-top-48 { 
+    top: var(--static-space-48);
+  }
+  
+  .m-left-48 { 
+    left: var(--static-space-48);
+  }
+  
+  .m-bottom-48 { 
+    bottom: var(--static-space-48);
+  }
+  
+  .m-right-48 { 
+    right: var(--static-space-48);
+  }
+  
+  .m-top-56 { 
+    top: var(--static-space-56);
+  }
+  
+  .m-left-56 { 
+    left: var(--static-space-56);
+  }
+  
+  .m-bottom-56 { 
+    bottom: var(--static-space-56);
+  }
+  
+  .m-right-56 { 
+    right: var(--static-space-56);
+  }
+  
+  .m-top-64 { 
+    top: var(--static-space-64);
+  }
+  
+  .m-left-64 { 
+    left: var(--static-space-64);
+  }
+  
+  .m-bottom-64 { 
+    bottom: var(--static-space-64);
+  }
+  
+  .m-right-64 { 
+    right: var(--static-space-64);
+  }
+  
+  .m-top-80 { 
+    top: var(--static-space-80);
+  }
+  
+  .m-left-80 { 
+    left: var(--static-space-80);
+  }
+  
+  .m-bottom-80 { 
+    bottom: var(--static-space-80);
+  }
+  
+  .m-right-80 { 
+    right: var(--static-space-80);
+  }
+  
+  .m-top-104 { 
+    top: var(--static-space-104); 
+  }
+  
+  .m-left-104 { 
+    left: var(--static-space-104); 
+  }
+  
+  .m-bottom-104 { 
+    bottom: var(--static-space-104); 
+  }
+  
+  .m-right-104 { 
+    right: var(--static-space-104); 
+  }
+  
+  .m-top-128 { 
+    top: var(--static-space-128); 
+  }
+  
+  .m-left-128 { 
+    left: var(--static-space-128); 
+  }
+  
+  .m-bottom-128 { 
+    bottom: var(--static-space-128); 
+  }
+  
+  .m-right-128 { 
+    right: var(--static-space-128); 
+  }
+  
+  .m-top-160 { 
+    top: var(--static-space-160); 
+  }
+  
+  .m-left-160 { 
+    left: var(--static-space-160); 
+  }
+  
+  .m-bottom-160 { 
+    bottom: var(--static-space-160); 
+  }
+  
+  .m-right-160 { 
+    right: var(--static-space-160);
+  }
+}
+
+@include breakpoints.s {
+  .s-position-relative {
+    position: relative;
+  }
+  
+  .s-position-fixed {
+    position: fixed;
+  }
+  
+  .s-position-absolute {
+    position: absolute;
+  }
+  
+  .s-position-sticky {
+    position: sticky;
+  }
+  
+  .s-position-static {
+    position: static;
+  }
+  
+  .s-top-0 { 
+    top: 0;
+  }
+    
+  .s-left-0 { 
+    left: 0;
+  }
+    
+  .s-bottom-0 { 
+    bottom: 0;
+  }
+  
+  .s-right-0 { 
+    right: 0;
+  }
+  
+  .s-top-1 { 
+    top: var(--static-space-1);
+  }
+  
+  .s-left-1 { 
+    left: var(--static-space-1);
+  }
+  
+  .s-bottom-1 { 
+    bottom: var(--static-space-1);
+  }
+  
+  .s-right-1 { 
+    right: var(--static-space-1);
+  }
+  
+  .s-top-2 { 
+    top: var(--static-space-2);
+  }
+  
+  .s-left-2 { 
+    left: var(--static-space-2);
+  }
+  
+  .s-bottom-2 { 
+    bottom: var(--static-space-2);
+  }
+  
+  .s-right-2 { 
+    right: var(--static-space-2);
+  }
+  
+  .s-top-4 { 
+    top: var(--static-space-4);
+  }
+  
+  .s-left-4 { 
+    left: var(--static-space-4);
+  }
+  
+  .s-bottom-4 { 
+    bottom: var(--static-space-4);
+  }
+  
+  .s-right-4 { 
+    right: var(--static-space-4);
+  }
+  
+  .s-top-8 { 
+    top: var(--static-space-8);
+  }
+  
+  .s-left-8 { 
+    left: var(--static-space-8);
+  }
+  
+  .s-bottom-8 { 
+    bottom: var(--static-space-8);
+  }
+  
+  .s-right-8 { 
+    right: var(--static-space-8);
+  }
+  
+  .s-top-12 { 
+    top: var(--static-space-12);
+  }
+  
+  .s-left-12 { 
+    left: var(--static-space-12);
+  }
+  
+  .s-bottom-12 { 
+    bottom: var(--static-space-12);
+  }
+  
+  .s-right-12 { 
+    right: var(--static-space-12);
+  }
+  
+  .s-top-16 { 
+    top: var(--static-space-16);
+  }
+  
+  .s-left-16 { 
+    left: var(--static-space-16);
+  }
+  
+  .s-bottom-16 { 
+    bottom: var(--static-space-16);
+  }
+  
+  .s-right-16 { 
+    right: var(--static-space-16);
+  }
+  
+  .s-top-20 { 
+    top: var(--static-space-20);
+  }
+  
+  .s-left-20 { 
+    left: var(--static-space-20);
+  }
+  
+  .s-bottom-20 { 
+    bottom: var(--static-space-20);
+  }
+  
+  .s-right-20 { 
+    right: var(--static-space-20);
+  }
+  
+  .s-top-24 { 
+    top: var(--static-space-24);
+  }
+  
+  .s-left-24 { 
+    left: var(--static-space-24);
+  }
+  
+  .s-bottom-24 { 
+    bottom: var(--static-space-24);
+  }
+  
+  .s-right-24 { 
+    right: var(--static-space-24);
+  }
+  
+  .s-top-32 { 
+    top: var(--static-space-32);
+  }
+  
+  .s-left-32 { 
+    left: var(--static-space-32);
+  }
+  
+  .s-bottom-32 { 
+    bottom: var(--static-space-32);
+  }
+  
+  .s-right-32 { 
+    right: var(--static-space-32);
+  }
+  
+  .s-top-40 { 
+    top: var(--static-space-40);
+  }
+  
+  .s-left-40 { 
+    left: var(--static-space-40);
+  }
+  
+  .s-bottom-40 { 
+    bottom: var(--static-space-40);
+  }
+  
+  .s-right-40 { 
+    right: var(--static-space-40);
+  }
+  
+  .s-top-48 { 
+    top: var(--static-space-48);
+  }
+  
+  .s-left-48 { 
+    left: var(--static-space-48);
+  }
+  
+  .s-bottom-48 { 
+    bottom: var(--static-space-48);
+  }
+  
+  .s-right-48 { 
+    right: var(--static-space-48);
+  }
+  
+  .s-top-56 { 
+    top: var(--static-space-56);
+  }
+  
+  .s-left-56 { 
+    left: var(--static-space-56);
+  }
+  
+  .s-bottom-56 { 
+    bottom: var(--static-space-56);
+  }
+  
+  .s-right-56 { 
+    right: var(--static-space-56);
+  }
+  
+  .s-top-64 { 
+    top: var(--static-space-64);
+  }
+  
+  .s-left-64 { 
+    left: var(--static-space-64);
+  }
+  
+  .s-bottom-64 { 
+    bottom: var(--static-space-64);
+  }
+  
+  .s-right-64 { 
+    right: var(--static-space-64);
+  }
+  
+  .s-top-80 { 
+    top: var(--static-space-80);
+  }
+  
+  .s-left-80 { 
+    left: var(--static-space-80);
+  }
+  
+  .s-bottom-80 { 
+    bottom: var(--static-space-80);
+  }
+  
+  .s-right-80 { 
+    right: var(--static-space-80);
+  }
+  
+  .s-top-104 { 
+    top: var(--static-space-104); 
+  }
+  
+  .s-left-104 { 
+    left: var(--static-space-104); 
+  }
+  
+  .s-bottom-104 { 
+    bottom: var(--static-space-104); 
+  }
+  
+  .s-right-104 { 
+    right: var(--static-space-104); 
+  }
+  
+  .s-top-128 { 
+    top: var(--static-space-128); 
+  }
+  
+  .s-left-128 { 
+    left: var(--static-space-128); 
+  }
+  
+  .s-bottom-128 { 
+    bottom: var(--static-space-128); 
+  }
+  
+  .s-right-128 { 
+    right: var(--static-space-128); 
+  }
+  
+  .s-top-160 { 
+    top: var(--static-space-160); 
+  }
+  
+  .s-left-160 { 
+    left: var(--static-space-160); 
+  }
+  
+  .s-bottom-160 { 
+    bottom: var(--static-space-160); 
+  }
+  
+  .s-right-160 { 
+    right: var(--static-space-160);
+  }
+}
+
+@include breakpoints.xs {
+  .xs-position-relative {
+    position: relative;
+  }
+
+  .xs-position-fixed {
+    position: fixed;
+  }
+
+  .xs-position-absolute {
+    position: absolute;
+  }
+
+  .xs-position-sticky {
+    position: sticky;
+  }
+
+  .xs-position-static {
+    position: static;
+  }
+
+  .xs-top-0 {
+    top: 0;
+  }
+
+  .xs-left-0 {
+    left: 0;
+  }
+
+  .xs-bottom-0 {
+    bottom: 0;
+  }
+
+  .xs-right-0 {
+    right: 0;
+  }
+
+  .xs-top-1 {
+    top: var(--static-space-1);
+  }
+
+  .xs-left-1 {
+    left: var(--static-space-1);
+  }
+
+  .xs-bottom-1 {
+    bottom: var(--static-space-1);
+  }
+
+  .xs-right-1 {
+    right: var(--static-space-1);
+  }
+
+  .xs-top-2 {
+    top: var(--static-space-2);
+  }
+
+  .xs-left-2 {
+    left: var(--static-space-2);
+  }
+
+  .xs-bottom-2 {
+    bottom: var(--static-space-2);
+  }
+
+  .xs-right-2 {
+    right: var(--static-space-2);
+  }
+
+  .xs-top-4 {
+    top: var(--static-space-4);
+  }
+
+  .xs-left-4 {
+    left: var(--static-space-4);
+  }
+
+  .xs-bottom-4 {
+    bottom: var(--static-space-4);
+  }
+
+  .xs-right-4 {
+    right: var(--static-space-4);
+  }
+
+  .xs-top-8 {
+    top: var(--static-space-8);
+  }
+
+  .xs-left-8 {
+    left: var(--static-space-8);
+  }
+
+  .xs-bottom-8 {
+    bottom: var(--static-space-8);
+  }
+
+  .xs-right-8 {
+    right: var(--static-space-8);
+  }
+
+  .xs-top-12 {
+    top: var(--static-space-12);
+  }
+
+  .xs-left-12 {
+    left: var(--static-space-12);
+  }
+
+  .xs-bottom-12 {
+    bottom: var(--static-space-12);
+  }
+
+  .xs-right-12 {
+    right: var(--static-space-12);
+  }
+
+  .xs-top-16 {
+    top: var(--static-space-16);
+  }
+
+  .xs-left-16 {
+    left: var(--static-space-16);
+  }
+
+  .xs-bottom-16 {
+    bottom: var(--static-space-16);
+  }
+
+  .xs-right-16 {
+    right: var(--static-space-16);
+  }
+
+  .xs-top-20 {
+    top: var(--static-space-20);
+  }
+
+  .xs-left-20 {
+    left: var(--static-space-20);
+  }
+
+  .xs-bottom-20 {
+    bottom: var(--static-space-20);
+  }
+
+  .xs-right-20 {
+    right: var(--static-space-20);
+  }
+
+  .xs-top-24 {
+    top: var(--static-space-24);
+  }
+
+  .xs-left-24 {
+    left: var(--static-space-24);
+  }
+
+  .xs-bottom-24 {
+    bottom: var(--static-space-24);
+  }
+
+  .xs-right-24 {
+    right: var(--static-space-24);
+  }
+
+  .xs-top-32 {
+    top: var(--static-space-32);
+  }
+
+  .xs-left-32 {
+    left: var(--static-space-32);
+  }
+
+  .xs-bottom-32 {
+    bottom: var(--static-space-32);
+  }
+
+  .xs-right-32 {
+    right: var(--static-space-32);
+  }
+
+  .xs-top-40 {
+    top: var(--static-space-40);
+  }
+
+  .xs-left-40 {
+    left: var(--static-space-40);
+  }
+
+  .xs-bottom-40 {
+    bottom: var(--static-space-40);
+  }
+
+  .xs-right-40 {
+    right: var(--static-space-40);
+  }
+
+  .xs-top-48 {
+    top: var(--static-space-48);
+  }
+
+  .xs-left-48 {
+    left: var(--static-space-48);
+  }
+
+  .xs-bottom-48 {
+    bottom: var(--static-space-48);
+  }
+
+  .xs-right-48 {
+    right: var(--static-space-48);
+  }
+
+  .xs-top-56 {
+    top: var(--static-space-56);
+  }
+
+  .xs-left-56 {
+    left: var(--static-space-56);
+  }
+
+  .xs-bottom-56 {
+    bottom: var(--static-space-56);
+  }
+
+  .xs-right-56 {
+    right: var(--static-space-56);
+  }
+
+  .xs-top-64 {
+    top: var(--static-space-64);
+  }
+
+  .xs-left-64 {
+    left: var(--static-space-64);
+  }
+
+  .xs-bottom-64 {
+    bottom: var(--static-space-64);
+  }
+
+  .xs-right-64 {
+    right: var(--static-space-64);
+  }
+
+  .xs-top-80 {
+    top: var(--static-space-80);
+  }
+
+  .xs-left-80 {
+    left: var(--static-space-80);
+  }
+
+  .xs-bottom-80 {
+    bottom: var(--static-space-80);
+  }
+
+  .xs-right-80 {
+    right: var(--static-space-80);
+  }
+
+  .xs-top-104 {
+    top: var(--static-space-104);
+  }
+
+  .xs-left-104 {
+    left: var(--static-space-104);
+  }
+
+  .xs-bottom-104 {
+    bottom: var(--static-space-104);
+  }
+
+  .xs-right-104 {
+    right: var(--static-space-104);
+  }
+
+  .xs-top-128 {
+    top: var(--static-space-128);
+  }
+
+  .xs-left-128 {
+    left: var(--static-space-128);
+  }
+
+  .xs-bottom-128 {
+    bottom: var(--static-space-128);
+  }
+
+  .xs-right-128 {
+    right: var(--static-space-128);
+  }
+
+  .xs-top-160 {
+    top: var(--static-space-160);
+  }
+
+  .xs-left-160 {
+    left: var(--static-space-160);
+  }
+
+  .xs-bottom-160 {
+    bottom: var(--static-space-160);
+  }
+
+  .xs-right-160 {
+    right: var(--static-space-160);
+  }
+}