@radix-ui/themes/src/styles/utilities/margin.css

[](https://radix-ui.com/themes)

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*              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-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 {
    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-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 {
  --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-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 {
    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-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 {
  --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-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 {
    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-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 {
  --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-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 {
    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-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 {
  --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-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 {
    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-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 {
  --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-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 {
    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-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 {
  --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-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 {
    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-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 {
  --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);
  }
}