@womp/kookie-ui 0.3.22

package/src/styles/utilities/margin.css

@@ -0,0 +1,1161 @@
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*              All sides              */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-m,
+  .rt-r-m-0,
+  .rt-r-m-1,
+  .rt-r-m-2,
+  .rt-r-m-3,
+  .rt-r-m-4,
+  .rt-r-m-5,
+  .rt-r-m-6,
+  .rt-r-m-7,
+  .rt-r-m-8,
+  .rt-r-m-9,
+  .rt-r-m-10,
+  .rt-r-m-11,
+  .rt-r-m-12,
+  .-rt-r-m-1,
+  .-rt-r-m-2,
+  .-rt-r-m-3,
+  .-rt-r-m-4,
+  .-rt-r-m-5,
+  .-rt-r-m-6,
+  .-rt-r-m-7,
+  .-rt-r-m-8,
+  .-rt-r-m-9,
+  .-rt-r-m-10,
+  .-rt-r-m-11,
+  .-rt-r-m-12 {
+    margin-top: var(--margin-top-override, var(--margin-top));
+    margin-right: var(--margin-right-override, var(--margin-right));
+    margin-bottom: var(--margin-bottom-override, var(--margin-bottom));
+    margin-left: var(--margin-left-override, var(--margin-left));
+  }
+  .rt-r-m {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-m-0 {
+    --margin-top: 0px;
+    --margin-right: 0px;
+    --margin-bottom: 0px;
+    --margin-left: 0px;
+  }
+  .rt-r-m-1 {
+    --margin-top: var(--space-1);
+    --margin-right: var(--space-1);
+    --margin-bottom: var(--space-1);
+    --margin-left: var(--space-1);
+  }
+  .rt-r-m-2 {
+    --margin-top: var(--space-2);
+    --margin-right: var(--space-2);
+    --margin-bottom: var(--space-2);
+    --margin-left: var(--space-2);
+  }
+  .rt-r-m-3 {
+    --margin-top: var(--space-3);
+    --margin-right: var(--space-3);
+    --margin-bottom: var(--space-3);
+    --margin-left: var(--space-3);
+  }
+  .rt-r-m-4 {
+    --margin-top: var(--space-4);
+    --margin-right: var(--space-4);
+    --margin-bottom: var(--space-4);
+    --margin-left: var(--space-4);
+  }
+  .rt-r-m-5 {
+    --margin-top: var(--space-5);
+    --margin-right: var(--space-5);
+    --margin-bottom: var(--space-5);
+    --margin-left: var(--space-5);
+  }
+  .rt-r-m-6 {
+    --margin-top: var(--space-6);
+    --margin-right: var(--space-6);
+    --margin-bottom: var(--space-6);
+    --margin-left: var(--space-6);
+  }
+  .rt-r-m-7 {
+    --margin-top: var(--space-7);
+    --margin-right: var(--space-7);
+    --margin-bottom: var(--space-7);
+    --margin-left: var(--space-7);
+  }
+  .rt-r-m-8 {
+    --margin-top: var(--space-8);
+    --margin-right: var(--space-8);
+    --margin-bottom: var(--space-8);
+    --margin-left: var(--space-8);
+  }
+  .rt-r-m-9 {
+    --margin-top: var(--space-9);
+    --margin-right: var(--space-9);
+    --margin-bottom: var(--space-9);
+    --margin-left: var(--space-9);
+  }
+  .rt-r-m-10 {
+    --margin-top: var(--space-10);
+    --margin-right: var(--space-10);
+    --margin-bottom: var(--space-10);
+    --margin-left: var(--space-10);
+  }
+  .rt-r-m-11 {
+    --margin-top: var(--space-11);
+    --margin-right: var(--space-11);
+    --margin-bottom: var(--space-11);
+    --margin-left: var(--space-11);
+  }
+  .rt-r-m-12 {
+    --margin-top: var(--space-12);
+    --margin-right: var(--space-12);
+    --margin-bottom: var(--space-12);
+    --margin-left: var(--space-12);
+  }
+  .-rt-r-m-1 {
+    --margin-top: calc(-1 * var(--space-1));
+    --margin-right: calc(-1 * var(--space-1));
+    --margin-bottom: calc(-1 * var(--space-1));
+    --margin-left: calc(-1 * var(--space-1));
+  }
+  .-rt-r-m-2 {
+    --margin-top: calc(-1 * var(--space-2));
+    --margin-right: calc(-1 * var(--space-2));
+    --margin-bottom: calc(-1 * var(--space-2));
+    --margin-left: calc(-1 * var(--space-2));
+  }
+  .-rt-r-m-3 {
+    --margin-top: calc(-1 * var(--space-3));
+    --margin-right: calc(-1 * var(--space-3));
+    --margin-bottom: calc(-1 * var(--space-3));
+    --margin-left: calc(-1 * var(--space-3));
+  }
+  .-rt-r-m-4 {
+    --margin-top: calc(-1 * var(--space-4));
+    --margin-right: calc(-1 * var(--space-4));
+    --margin-bottom: calc(-1 * var(--space-4));
+    --margin-left: calc(-1 * var(--space-4));
+  }
+  .-rt-r-m-5 {
+    --margin-top: calc(-1 * var(--space-5));
+    --margin-right: calc(-1 * var(--space-5));
+    --margin-bottom: calc(-1 * var(--space-5));
+    --margin-left: calc(-1 * var(--space-5));
+  }
+  .-rt-r-m-6 {
+    --margin-top: calc(-1 * var(--space-6));
+    --margin-right: calc(-1 * var(--space-6));
+    --margin-bottom: calc(-1 * var(--space-6));
+    --margin-left: calc(-1 * var(--space-6));
+  }
+  .-rt-r-m-7 {
+    --margin-top: calc(-1 * var(--space-7));
+    --margin-right: calc(-1 * var(--space-7));
+    --margin-bottom: calc(-1 * var(--space-7));
+    --margin-left: calc(-1 * var(--space-7));
+  }
+  .-rt-r-m-8 {
+    --margin-top: calc(-1 * var(--space-8));
+    --margin-right: calc(-1 * var(--space-8));
+    --margin-bottom: calc(-1 * var(--space-8));
+    --margin-left: calc(-1 * var(--space-8));
+  }
+  .-rt-r-m-9 {
+    --margin-top: calc(-1 * var(--space-9));
+    --margin-right: calc(-1 * var(--space-9));
+    --margin-bottom: calc(-1 * var(--space-9));
+    --margin-left: calc(-1 * var(--space-9));
+  }
+  .-rt-r-m-10 {
+    --margin-top: calc(-1 * var(--space-10));
+    --margin-right: calc(-1 * var(--space-10));
+    --margin-bottom: calc(-1 * var(--space-10));
+    --margin-left: calc(-1 * var(--space-10));
+  }
+  .-rt-r-m-11 {
+    --margin-top: calc(-1 * var(--space-11));
+    --margin-right: calc(-1 * var(--space-11));
+    --margin-bottom: calc(-1 * var(--space-11));
+    --margin-left: calc(-1 * var(--space-11));
+  }
+  .-rt-r-m-12 {
+    --margin-top: calc(-1 * var(--space-12));
+    --margin-right: calc(-1 * var(--space-12));
+    --margin-bottom: calc(-1 * var(--space-12));
+    --margin-left: calc(-1 * var(--space-12));
+  }
+}
+.rt-r-m {
+  --margin-top: var(--m);
+  --margin-right: var(--m);
+  --margin-bottom: var(--m);
+  --margin-left: var(--m);
+}
+@media (--xs) {
+  .xs\:rt-r-m {
+    --margin-top: var(--m-xs);
+    --margin-right: var(--m-xs);
+    --margin-bottom: var(--m-xs);
+    --margin-left: var(--m-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-m {
+    --margin-top: var(--m-sm);
+    --margin-right: var(--m-sm);
+    --margin-bottom: var(--m-sm);
+    --margin-left: var(--m-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-m {
+    --margin-top: var(--m-md);
+    --margin-right: var(--m-md);
+    --margin-bottom: var(--m-md);
+    --margin-left: var(--m-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-m {
+    --margin-top: var(--m-lg);
+    --margin-right: var(--m-lg);
+    --margin-bottom: var(--m-lg);
+    --margin-left: var(--m-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-m {
+    --margin-top: var(--m-xl);
+    --margin-right: var(--m-xl);
+    --margin-bottom: var(--m-xl);
+    --margin-left: var(--m-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*           Left and right            */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-mx,
+  .rt-r-mx-0,
+  .rt-r-mx-1,
+  .rt-r-mx-2,
+  .rt-r-mx-3,
+  .rt-r-mx-4,
+  .rt-r-mx-5,
+  .rt-r-mx-6,
+  .rt-r-mx-7,
+  .rt-r-mx-8,
+  .rt-r-mx-9,
+  .rt-r-mx-10,
+  .rt-r-mx-11,
+  .rt-r-mx-12,
+  .-rt-r-mx-1,
+  .-rt-r-mx-2,
+  .-rt-r-mx-3,
+  .-rt-r-mx-4,
+  .-rt-r-mx-5,
+  .-rt-r-mx-6,
+  .-rt-r-mx-7,
+  .-rt-r-mx-8,
+  .-rt-r-mx-9,
+  .-rt-r-mx-10,
+  .-rt-r-mx-11,
+  .-rt-r-mx-12 {
+    margin-left: var(--margin-left-override, var(--margin-left));
+    margin-right: var(--margin-right-override, var(--margin-right));
+  }
+  .rt-r-mx {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-mx-0 {
+    --margin-left: 0px;
+    --margin-right: 0px;
+  }
+  .rt-r-mx-1 {
+    --margin-left: var(--space-1);
+    --margin-right: var(--space-1);
+  }
+  .rt-r-mx-2 {
+    --margin-left: var(--space-2);
+    --margin-right: var(--space-2);
+  }
+  .rt-r-mx-3 {
+    --margin-left: var(--space-3);
+    --margin-right: var(--space-3);
+  }
+  .rt-r-mx-4 {
+    --margin-left: var(--space-4);
+    --margin-right: var(--space-4);
+  }
+  .rt-r-mx-5 {
+    --margin-left: var(--space-5);
+    --margin-right: var(--space-5);
+  }
+  .rt-r-mx-6 {
+    --margin-left: var(--space-6);
+    --margin-right: var(--space-6);
+  }
+  .rt-r-mx-7 {
+    --margin-left: var(--space-7);
+    --margin-right: var(--space-7);
+  }
+  .rt-r-mx-8 {
+    --margin-left: var(--space-8);
+    --margin-right: var(--space-8);
+  }
+  .rt-r-mx-9 {
+    --margin-left: var(--space-9);
+    --margin-right: var(--space-9);
+  }
+  .rt-r-mx-10 {
+    --margin-left: var(--space-10);
+    --margin-right: var(--space-10);
+  }
+  .rt-r-mx-11 {
+    --margin-left: var(--space-11);
+    --margin-right: var(--space-11);
+  }
+  .rt-r-mx-12 {
+    --margin-left: var(--space-12);
+    --margin-right: var(--space-12);
+  }
+  .-rt-r-mx-1 {
+    --margin-left: calc(-1 * var(--space-1));
+    --margin-right: calc(-1 * var(--space-1));
+  }
+  .-rt-r-mx-2 {
+    --margin-left: calc(-1 * var(--space-2));
+    --margin-right: calc(-1 * var(--space-2));
+  }
+  .-rt-r-mx-3 {
+    --margin-left: calc(-1 * var(--space-3));
+    --margin-right: calc(-1 * var(--space-3));
+  }
+  .-rt-r-mx-4 {
+    --margin-left: calc(-1 * var(--space-4));
+    --margin-right: calc(-1 * var(--space-4));
+  }
+  .-rt-r-mx-5 {
+    --margin-left: calc(-1 * var(--space-5));
+    --margin-right: calc(-1 * var(--space-5));
+  }
+  .-rt-r-mx-6 {
+    --margin-left: calc(-1 * var(--space-6));
+    --margin-right: calc(-1 * var(--space-6));
+  }
+  .-rt-r-mx-7 {
+    --margin-left: calc(-1 * var(--space-7));
+    --margin-right: calc(-1 * var(--space-7));
+  }
+  .-rt-r-mx-8 {
+    --margin-left: calc(-1 * var(--space-8));
+    --margin-right: calc(-1 * var(--space-8));
+  }
+  .-rt-r-mx-9 {
+    --margin-left: calc(-1 * var(--space-9));
+    --margin-right: calc(-1 * var(--space-9));
+  }
+  .-rt-r-mx-10 {
+    --margin-left: calc(-1 * var(--space-10));
+    --margin-right: calc(-1 * var(--space-10));
+  }
+  .-rt-r-mx-11 {
+    --margin-left: calc(-1 * var(--space-11));
+    --margin-right: calc(-1 * var(--space-11));
+  }
+  .-rt-r-mx-12 {
+    --margin-left: calc(-1 * var(--space-12));
+    --margin-right: calc(-1 * var(--space-12));
+  }
+}
+.rt-r-mx {
+  --margin-left: var(--ml);
+  --margin-right: var(--mr);
+}
+@media (--xs) {
+  .xs\:rt-r-mx {
+    --margin-left: var(--ml-xs);
+    --margin-right: var(--mr-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-mx {
+    --margin-left: var(--ml-md);
+    --margin-right: var(--mr-md);
+  }
+}
+@media (--md) {
+  .md\:rt-r-mx {
+    --margin-left: var(--ml-md);
+    --margin-right: var(--mr-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-mx {
+    --margin-left: var(--ml-lg);
+    --margin-right: var(--mr-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-mx {
+    --margin-left: var(--ml-xl);
+    --margin-right: var(--mr-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*           Top and bottom            */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-my,
+  .rt-r-my-0,
+  .rt-r-my-1,
+  .rt-r-my-2,
+  .rt-r-my-3,
+  .rt-r-my-4,
+  .rt-r-my-5,
+  .rt-r-my-6,
+  .rt-r-my-7,
+  .rt-r-my-8,
+  .rt-r-my-9,
+  .rt-r-my-10,
+  .rt-r-my-11,
+  .rt-r-my-12,
+  .-rt-r-my-1,
+  .-rt-r-my-2,
+  .-rt-r-my-3,
+  .-rt-r-my-4,
+  .-rt-r-my-5,
+  .-rt-r-my-6,
+  .-rt-r-my-7,
+  .-rt-r-my-8,
+  .-rt-r-my-9,
+  .-rt-r-my-10,
+  .-rt-r-my-11,
+  .-rt-r-my-12 {
+    margin-top: var(--margin-top-override, var(--margin-top));
+    margin-bottom: var(--margin-bottom-override, var(--margin-bottom));
+  }
+  .rt-r-my {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-my-0 {
+    --margin-top: 0px;
+    --margin-bottom: 0px;
+  }
+  .rt-r-my-1 {
+    --margin-top: var(--space-1);
+    --margin-bottom: var(--space-1);
+  }
+  .rt-r-my-2 {
+    --margin-top: var(--space-2);
+    --margin-bottom: var(--space-2);
+  }
+  .rt-r-my-3 {
+    --margin-top: var(--space-3);
+    --margin-bottom: var(--space-3);
+  }
+  .rt-r-my-4 {
+    --margin-top: var(--space-4);
+    --margin-bottom: var(--space-4);
+  }
+  .rt-r-my-5 {
+    --margin-top: var(--space-5);
+    --margin-bottom: var(--space-5);
+  }
+  .rt-r-my-6 {
+    --margin-top: var(--space-6);
+    --margin-bottom: var(--space-6);
+  }
+  .rt-r-my-7 {
+    --margin-top: var(--space-7);
+    --margin-bottom: var(--space-7);
+  }
+  .rt-r-my-8 {
+    --margin-top: var(--space-8);
+    --margin-bottom: var(--space-8);
+  }
+  .rt-r-my-9 {
+    --margin-top: var(--space-9);
+    --margin-bottom: var(--space-9);
+  }
+  .rt-r-my-10 {
+    --margin-top: var(--space-10);
+    --margin-bottom: var(--space-10);
+  }
+  .rt-r-my-11 {
+    --margin-top: var(--space-11);
+    --margin-bottom: var(--space-11);
+  }
+  .rt-r-my-12 {
+    --margin-top: var(--space-12);
+    --margin-bottom: var(--space-12);
+  }
+  .-rt-r-my-1 {
+    --margin-top: calc(-1 * var(--space-1));
+    --margin-bottom: calc(-1 * var(--space-1));
+  }
+  .-rt-r-my-2 {
+    --margin-top: calc(-1 * var(--space-2));
+    --margin-bottom: calc(-1 * var(--space-2));
+  }
+  .-rt-r-my-3 {
+    --margin-top: calc(-1 * var(--space-3));
+    --margin-bottom: calc(-1 * var(--space-3));
+  }
+  .-rt-r-my-4 {
+    --margin-top: calc(-1 * var(--space-4));
+    --margin-bottom: calc(-1 * var(--space-4));
+  }
+  .-rt-r-my-5 {
+    --margin-top: calc(-1 * var(--space-5));
+    --margin-bottom: calc(-1 * var(--space-5));
+  }
+  .-rt-r-my-6 {
+    --margin-top: calc(-1 * var(--space-6));
+    --margin-bottom: calc(-1 * var(--space-6));
+  }
+  .-rt-r-my-7 {
+    --margin-top: calc(-1 * var(--space-7));
+    --margin-bottom: calc(-1 * var(--space-7));
+  }
+  .-rt-r-my-8 {
+    --margin-top: calc(-1 * var(--space-8));
+    --margin-bottom: calc(-1 * var(--space-8));
+  }
+  .-rt-r-my-9 {
+    --margin-top: calc(-1 * var(--space-9));
+    --margin-bottom: calc(-1 * var(--space-9));
+  }
+  .-rt-r-my-10 {
+    --margin-top: calc(-1 * var(--space-10));
+    --margin-bottom: calc(-1 * var(--space-10));
+  }
+  .-rt-r-my-11 {
+    --margin-top: calc(-1 * var(--space-11));
+    --margin-bottom: calc(-1 * var(--space-11));
+  }
+  .-rt-r-my-12 {
+    --margin-top: calc(-1 * var(--space-12));
+    --margin-bottom: calc(-1 * var(--space-12));
+  }
+}
+.rt-r-my {
+  --margin-top: var(--mt);
+  --margin-bottom: var(--mb);
+}
+@media (--xs) {
+  .xs\:rt-r-my {
+    --margin-top: var(--mt-xs);
+    --margin-bottom: var(--mb-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-my {
+    --margin-top: var(--mt-sm);
+    --margin-bottom: var(--mb-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-my {
+    --margin-top: var(--mt-md);
+    --margin-bottom: var(--mb-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-my {
+    --margin-top: var(--mt-lg);
+    --margin-bottom: var(--mb-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-my {
+    --margin-top: var(--mt-xl);
+    --margin-bottom: var(--mb-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                 Top                 */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-mt,
+  .rt-r-mt-0,
+  .rt-r-mt-1,
+  .rt-r-mt-2,
+  .rt-r-mt-3,
+  .rt-r-mt-4,
+  .rt-r-mt-5,
+  .rt-r-mt-6,
+  .rt-r-mt-7,
+  .rt-r-mt-8,
+  .rt-r-mt-9,
+  .rt-r-mt-10,
+  .rt-r-mt-11,
+  .rt-r-mt-12,
+  .-rt-r-mt-1,
+  .-rt-r-mt-2,
+  .-rt-r-mt-3,
+  .-rt-r-mt-4,
+  .-rt-r-mt-5,
+  .-rt-r-mt-6,
+  .-rt-r-mt-7,
+  .-rt-r-mt-8,
+  .-rt-r-mt-9,
+  .-rt-r-mt-10,
+  .-rt-r-mt-11,
+  .-rt-r-mt-12 {
+    margin-top: var(--margin-top-override, var(--margin-top));
+  }
+  .rt-r-mt {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-mt-0 {
+    --margin-top: 0px;
+  }
+  .rt-r-mt-1 {
+    --margin-top: var(--space-1);
+  }
+  .rt-r-mt-2 {
+    --margin-top: var(--space-2);
+  }
+  .rt-r-mt-3 {
+    --margin-top: var(--space-3);
+  }
+  .rt-r-mt-4 {
+    --margin-top: var(--space-4);
+  }
+  .rt-r-mt-5 {
+    --margin-top: var(--space-5);
+  }
+  .rt-r-mt-6 {
+    --margin-top: var(--space-6);
+  }
+  .rt-r-mt-7 {
+    --margin-top: var(--space-7);
+  }
+  .rt-r-mt-8 {
+    --margin-top: var(--space-8);
+  }
+  .rt-r-mt-9 {
+    --margin-top: var(--space-9);
+  }
+  .rt-r-mt-10 {
+    --margin-top: var(--space-10);
+  }
+  .rt-r-mt-11 {
+    --margin-top: var(--space-11);
+  }
+  .rt-r-mt-12 {
+    --margin-top: var(--space-12);
+  }
+  .-rt-r-mt-1 {
+    --margin-top: calc(-1 * var(--space-1));
+  }
+  .-rt-r-mt-2 {
+    --margin-top: calc(-1 * var(--space-2));
+  }
+  .-rt-r-mt-3 {
+    --margin-top: calc(-1 * var(--space-3));
+  }
+  .-rt-r-mt-4 {
+    --margin-top: calc(-1 * var(--space-4));
+  }
+  .-rt-r-mt-5 {
+    --margin-top: calc(-1 * var(--space-5));
+  }
+  .-rt-r-mt-6 {
+    --margin-top: calc(-1 * var(--space-6));
+  }
+  .-rt-r-mt-7 {
+    --margin-top: calc(-1 * var(--space-7));
+  }
+  .-rt-r-mt-8 {
+    --margin-top: calc(-1 * var(--space-8));
+  }
+  .-rt-r-mt-9 {
+    --margin-top: calc(-1 * var(--space-9));
+  }
+  .-rt-r-mt-10 {
+    --margin-top: calc(-1 * var(--space-10));
+  }
+  .-rt-r-mt-11 {
+    --margin-top: calc(-1 * var(--space-11));
+  }
+  .-rt-r-mt-12 {
+    --margin-top: calc(-1 * var(--space-12));
+  }
+}
+.rt-r-mt {
+  --margin-top: var(--mt);
+}
+@media (--xs) {
+  .xs\:rt-r-mt {
+    --margin-top: var(--mt-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-mt {
+    --margin-top: var(--mt-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-mt {
+    --margin-top: var(--mt-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-mt {
+    --margin-top: var(--mt-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-mt {
+    --margin-top: var(--mt-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Right                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-mr,
+  .rt-r-mr-0,
+  .rt-r-mr-1,
+  .rt-r-mr-2,
+  .rt-r-mr-3,
+  .rt-r-mr-4,
+  .rt-r-mr-5,
+  .rt-r-mr-6,
+  .rt-r-mr-7,
+  .rt-r-mr-8,
+  .rt-r-mr-9,
+  .rt-r-mr-10,
+  .rt-r-mr-11,
+  .rt-r-mr-12,
+  .-rt-r-mr-1,
+  .-rt-r-mr-2,
+  .-rt-r-mr-3,
+  .-rt-r-mr-4,
+  .-rt-r-mr-5,
+  .-rt-r-mr-6,
+  .-rt-r-mr-7,
+  .-rt-r-mr-8,
+  .-rt-r-mr-9,
+  .-rt-r-mr-10,
+  .-rt-r-mr-11,
+  .-rt-r-mr-12 {
+    margin-right: var(--margin-right-override, var(--margin-right));
+  }
+  .rt-r-mr {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-mr-0 {
+    --margin-right: 0px;
+  }
+  .rt-r-mr-1 {
+    --margin-right: var(--space-1);
+  }
+  .rt-r-mr-2 {
+    --margin-right: var(--space-2);
+  }
+  .rt-r-mr-3 {
+    --margin-right: var(--space-3);
+  }
+  .rt-r-mr-4 {
+    --margin-right: var(--space-4);
+  }
+  .rt-r-mr-5 {
+    --margin-right: var(--space-5);
+  }
+  .rt-r-mr-6 {
+    --margin-right: var(--space-6);
+  }
+  .rt-r-mr-7 {
+    --margin-right: var(--space-7);
+  }
+  .rt-r-mr-8 {
+    --margin-right: var(--space-8);
+  }
+  .rt-r-mr-9 {
+    --margin-right: var(--space-9);
+  }
+  .rt-r-mr-10 {
+    --margin-right: var(--space-10);
+  }
+  .rt-r-mr-11 {
+    --margin-right: var(--space-11);
+  }
+  .rt-r-mr-12 {
+    --margin-right: var(--space-12);
+  }
+  .-rt-r-mr-1 {
+    --margin-right: calc(-1 * var(--space-1));
+  }
+  .-rt-r-mr-2 {
+    --margin-right: calc(-1 * var(--space-2));
+  }
+  .-rt-r-mr-3 {
+    --margin-right: calc(-1 * var(--space-3));
+  }
+  .-rt-r-mr-4 {
+    --margin-right: calc(-1 * var(--space-4));
+  }
+  .-rt-r-mr-5 {
+    --margin-right: calc(-1 * var(--space-5));
+  }
+  .-rt-r-mr-6 {
+    --margin-right: calc(-1 * var(--space-6));
+  }
+  .-rt-r-mr-7 {
+    --margin-right: calc(-1 * var(--space-7));
+  }
+  .-rt-r-mr-8 {
+    --margin-right: calc(-1 * var(--space-8));
+  }
+  .-rt-r-mr-9 {
+    --margin-right: calc(-1 * var(--space-9));
+  }
+  .-rt-r-mr-10 {
+    --margin-right: calc(-1 * var(--space-10));
+  }
+  .-rt-r-mr-11 {
+    --margin-right: calc(-1 * var(--space-11));
+  }
+  .-rt-r-mr-12 {
+    --margin-right: calc(-1 * var(--space-12));
+  }
+}
+.rt-r-mr {
+  --margin-right: var(--mr);
+}
+@media (--xs) {
+  .xs\:rt-r-mr {
+    --margin-right: var(--mr-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-mr {
+    --margin-right: var(--mr-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-mr {
+    --margin-right: var(--mr-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-mr {
+    --margin-right: var(--mr-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-mr {
+    --margin-right: var(--mr-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*               Bottom                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-mb,
+  .rt-r-mb-0,
+  .rt-r-mb-1,
+  .rt-r-mb-2,
+  .rt-r-mb-3,
+  .rt-r-mb-4,
+  .rt-r-mb-5,
+  .rt-r-mb-6,
+  .rt-r-mb-7,
+  .rt-r-mb-8,
+  .rt-r-mb-9,
+  .rt-r-mb-10,
+  .rt-r-mb-11,
+  .rt-r-mb-12,
+  .-rt-r-mb-1,
+  .-rt-r-mb-2,
+  .-rt-r-mb-3,
+  .-rt-r-mb-4,
+  .-rt-r-mb-5,
+  .-rt-r-mb-6,
+  .-rt-r-mb-7,
+  .-rt-r-mb-8,
+  .-rt-r-mb-9,
+  .-rt-r-mb-10,
+  .-rt-r-mb-11,
+  .-rt-r-mb-12 {
+    margin-bottom: var(--margin-bottom-override, var(--margin-bottom));
+  }
+  .rt-r-mb {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-mb-0 {
+    --margin-bottom: 0px;
+  }
+  .rt-r-mb-1 {
+    --margin-bottom: var(--space-1);
+  }
+  .rt-r-mb-2 {
+    --margin-bottom: var(--space-2);
+  }
+  .rt-r-mb-3 {
+    --margin-bottom: var(--space-3);
+  }
+  .rt-r-mb-4 {
+    --margin-bottom: var(--space-4);
+  }
+  .rt-r-mb-5 {
+    --margin-bottom: var(--space-5);
+  }
+  .rt-r-mb-6 {
+    --margin-bottom: var(--space-6);
+  }
+  .rt-r-mb-7 {
+    --margin-bottom: var(--space-7);
+  }
+  .rt-r-mb-8 {
+    --margin-bottom: var(--space-8);
+  }
+  .rt-r-mb-9 {
+    --margin-bottom: var(--space-9);
+  }
+  .rt-r-mb-10 {
+    --margin-bottom: var(--space-10);
+  }
+  .rt-r-mb-11 {
+    --margin-bottom: var(--space-11);
+  }
+  .rt-r-mb-12 {
+    --margin-bottom: var(--space-12);
+  }
+  .-rt-r-mb-1 {
+    --margin-bottom: calc(-1 * var(--space-1));
+  }
+  .-rt-r-mb-2 {
+    --margin-bottom: calc(-1 * var(--space-2));
+  }
+  .-rt-r-mb-3 {
+    --margin-bottom: calc(-1 * var(--space-3));
+  }
+  .-rt-r-mb-4 {
+    --margin-bottom: calc(-1 * var(--space-4));
+  }
+  .-rt-r-mb-5 {
+    --margin-bottom: calc(-1 * var(--space-5));
+  }
+  .-rt-r-mb-6 {
+    --margin-bottom: calc(-1 * var(--space-6));
+  }
+  .-rt-r-mb-7 {
+    --margin-bottom: calc(-1 * var(--space-7));
+  }
+  .-rt-r-mb-8 {
+    --margin-bottom: calc(-1 * var(--space-8));
+  }
+  .-rt-r-mb-9 {
+    --margin-bottom: calc(-1 * var(--space-9));
+  }
+  .-rt-r-mb-10 {
+    --margin-bottom: calc(-1 * var(--space-10));
+  }
+  .-rt-r-mb-11 {
+    --margin-bottom: calc(-1 * var(--space-11));
+  }
+  .-rt-r-mb-12 {
+    --margin-bottom: calc(-1 * var(--space-12));
+  }
+}
+
+.rt-r-mb {
+  --margin-bottom: var(--mb);
+}
+@media (--xs) {
+  .xs\:rt-r-mb {
+    --margin-bottom: var(--mb-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-mb {
+    --margin-bottom: var(--mb-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-mb {
+    --margin-bottom: var(--mb-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-mb {
+    --margin-bottom: var(--mb-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-mb {
+    --margin-bottom: var(--mb-xl);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Left                 */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-r-ml,
+  .rt-r-ml-0,
+  .rt-r-ml-1,
+  .rt-r-ml-2,
+  .rt-r-ml-3,
+  .rt-r-ml-4,
+  .rt-r-ml-5,
+  .rt-r-ml-6,
+  .rt-r-ml-7,
+  .rt-r-ml-8,
+  .rt-r-ml-9,
+  .rt-r-ml-10,
+  .rt-r-ml-11,
+  .rt-r-ml-12,
+  .-rt-r-ml-1,
+  .-rt-r-ml-2,
+  .-rt-r-ml-3,
+  .-rt-r-ml-4,
+  .-rt-r-ml-5,
+  .-rt-r-ml-6,
+  .-rt-r-ml-7,
+  .-rt-r-ml-8,
+  .-rt-r-ml-9,
+  .-rt-r-ml-10,
+  .-rt-r-ml-11,
+  .-rt-r-ml-12 {
+    margin-left: var(--margin-left-override, var(--margin-left));
+  }
+  .rt-r-ml {
+    /* Keep this selector here to maintain the source order */
+  }
+  .rt-r-ml-0 {
+    --margin-left: 0px;
+  }
+  .rt-r-ml-1 {
+    --margin-left: var(--space-1);
+  }
+  .rt-r-ml-2 {
+    --margin-left: var(--space-2);
+  }
+  .rt-r-ml-3 {
+    --margin-left: var(--space-3);
+  }
+  .rt-r-ml-4 {
+    --margin-left: var(--space-4);
+  }
+  .rt-r-ml-5 {
+    --margin-left: var(--space-5);
+  }
+  .rt-r-ml-6 {
+    --margin-left: var(--space-6);
+  }
+  .rt-r-ml-7 {
+    --margin-left: var(--space-7);
+  }
+  .rt-r-ml-8 {
+    --margin-left: var(--space-8);
+  }
+  .rt-r-ml-9 {
+    --margin-left: var(--space-9);
+  }
+  .rt-r-ml-10 {
+    --margin-left: var(--space-10);
+  }
+  .rt-r-ml-11 {
+    --margin-left: var(--space-11);
+  }
+  .rt-r-ml-12 {
+    --margin-left: var(--space-12);
+  }
+  .-rt-r-ml-1 {
+    --margin-left: calc(-1 * var(--space-1));
+  }
+  .-rt-r-ml-2 {
+    --margin-left: calc(-1 * var(--space-2));
+  }
+  .-rt-r-ml-3 {
+    --margin-left: calc(-1 * var(--space-3));
+  }
+  .-rt-r-ml-4 {
+    --margin-left: calc(-1 * var(--space-4));
+  }
+  .-rt-r-ml-5 {
+    --margin-left: calc(-1 * var(--space-5));
+  }
+  .-rt-r-ml-6 {
+    --margin-left: calc(-1 * var(--space-6));
+  }
+  .-rt-r-ml-7 {
+    --margin-left: calc(-1 * var(--space-7));
+  }
+  .-rt-r-ml-8 {
+    --margin-left: calc(-1 * var(--space-8));
+  }
+  .-rt-r-ml-9 {
+    --margin-left: calc(-1 * var(--space-9));
+  }
+  .-rt-r-ml-10 {
+    --margin-left: calc(-1 * var(--space-10));
+  }
+  .-rt-r-ml-11 {
+    --margin-left: calc(-1 * var(--space-11));
+  }
+  .-rt-r-ml-12 {
+    --margin-left: calc(-1 * var(--space-12));
+  }
+}
+.rt-r-ml {
+  --margin-left: var(--ml);
+}
+@media (--xs) {
+  .xs\:rt-r-ml {
+    --margin-left: var(--ml-xs);
+  }
+}
+@media (--sm) {
+  .sm\:rt-r-ml {
+    --margin-left: var(--ml-sm);
+  }
+}
+@media (--md) {
+  .md\:rt-r-ml {
+    --margin-left: var(--ml-md);
+  }
+}
+@media (--lg) {
+  .lg\:rt-r-ml {
+    --margin-left: var(--ml-lg);
+  }
+}
+@media (--xl) {
+  .xl\:rt-r-ml {
+    --margin-left: var(--ml-xl);
+  }
+}