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

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

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*              All sides              */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

@breakpoints {
  .rt-r-p {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-p-0 {
    padding: 0;
  }
  .rt-r-p-1 {
    padding: var(--space-1);
  }
  .rt-r-p-2 {
    padding: var(--space-2);
  }
  .rt-r-p-3 {
    padding: var(--space-3);
  }
  .rt-r-p-4 {
    padding: var(--space-4);
  }
  .rt-r-p-5 {
    padding: var(--space-5);
  }
  .rt-r-p-6 {
    padding: var(--space-6);
  }
  .rt-r-p-7 {
    padding: var(--space-7);
  }
  .rt-r-p-8 {
    padding: var(--space-8);
  }
  .rt-r-p-9 {
    padding: var(--space-9);
  }
  .rt-r-p-inset {
    padding-top: var(--inset-padding-top);
    padding-right: var(--inset-padding-right);
    padding-bottom: var(--inset-padding-bottom);
    padding-left: var(--inset-padding-left);
  }
}

.rt-r-p {
  padding: var(--p);
}
@media (--xs) {
  .xs\:rt-r-p {
    padding: var(--p-xs);
  }
}
@media (--sm) {
  .sm\:rt-r-p {
    padding: var(--p-sm);
  }
}
@media (--md) {
  .md\:rt-r-p {
    padding: var(--p-md);
  }
}
@media (--lg) {
  .lg\:rt-r-p {
    padding: var(--p-lg);
  }
}
@media (--xl) {
  .xl\:rt-r-p {
    padding: var(--p-xl);
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*           Left and right            */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

@breakpoints {
  .rt-r-px {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .rt-r-px-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .rt-r-px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .rt-r-px-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .rt-r-px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .rt-r-px-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .rt-r-px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .rt-r-px-7 {
    padding-left: var(--space-7);
    padding-right: var(--space-7);
  }
  .rt-r-px-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .rt-r-px-9 {
    padding-left: var(--space-9);
    padding-right: var(--space-9);
  }
  .rt-r-px-inset {
    padding-left: var(--inset-padding-left);
    padding-right: var(--inset-padding-right);
  }
}

.rt-r-px {
  padding-left: var(--pl);
  padding-right: var(--pr);
}
@media (--xs) {
  .xs\:rt-r-px {
    padding-left: var(--pl-xs);
    padding-right: var(--pr-xs);
  }
}
@media (--sm) {
  .sm\:rt-r-px {
    padding-left: var(--pl-sm);
    padding-right: var(--pr-sm);
  }
}
@media (--md) {
  .md\:rt-r-px {
    padding-left: var(--pl-md);
    padding-right: var(--pr-md);
  }
}
@media (--lg) {
  .lg\:rt-r-px {
    padding-left: var(--pl-lg);
    padding-right: var(--pr-lg);
  }
}
@media (--xl) {
  .xl\:rt-r-px {
    padding-left: var(--pl-xl);
    padding-right: var(--pr-xl);
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*           Top and bottom            */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

@breakpoints {
  .rt-r-py {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .rt-r-py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .rt-r-py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .rt-r-py-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .rt-r-py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .rt-r-py-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .rt-r-py-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .rt-r-py-7 {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  .rt-r-py-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .rt-r-py-9 {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
  .rt-r-py-inset {
    padding-top: var(--inset-padding-top);
    padding-bottom: var(--inset-padding-bottom);
  }
}

.rt-r-py {
  padding-top: var(--pt);
  padding-bottom: var(--pb);
}
@media (--xs) {
  .xs\:rt-r-py {
    padding-top: var(--pt-xs);
    padding-bottom: var(--pb-xs);
  }
}
@media (--sm) {
  .sm\:rt-r-py {
    padding-top: var(--pt-sm);
    padding-bottom: var(--pb-sm);
  }
}
@media (--md) {
  .md\:rt-r-py {
    padding-top: var(--pt-md);
    padding-bottom: var(--pb-md);
  }
}
@media (--lg) {
  .lg\:rt-r-py {
    padding-top: var(--pt-lg);
    padding-bottom: var(--pb-lg);
  }
}
@media (--xl) {
  .xl\:rt-r-py {
    padding-top: var(--pt-xl);
    padding-bottom: var(--pb-xl);
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*                 Top                 */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

@breakpoints {
  .rt-r-pt {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-pt-0 {
    padding-top: 0;
  }
  .rt-r-pt-1 {
    padding-top: var(--space-1);
  }
  .rt-r-pt-2 {
    padding-top: var(--space-2);
  }
  .rt-r-pt-3 {
    padding-top: var(--space-3);
  }
  .rt-r-pt-4 {
    padding-top: var(--space-4);
  }
  .rt-r-pt-5 {
    padding-top: var(--space-5);
  }
  .rt-r-pt-6 {
    padding-top: var(--space-6);
  }
  .rt-r-pt-7 {
    padding-top: var(--space-7);
  }
  .rt-r-pt-8 {
    padding-top: var(--space-8);
  }
  .rt-r-pt-9 {
    padding-top: var(--space-9);
  }
  .rt-r-pt-inset {
    padding-top: var(--inset-padding-top);
  }
}

.rt-r-pt {
  padding-top: var(--pt);
}
@media (--xs) {
  .xs\:rt-r-pt {
    padding-top: var(--pt-xs);
  }
}
@media (--sm) {
  .sm\:rt-r-pt {
    padding-top: var(--pt-sm);
  }
}
@media (--md) {
  .md\:rt-r-pt {
    padding-top: var(--pt-md);
  }
}
@media (--lg) {
  .lg\:rt-r-pt {
    padding-top: var(--pt-lg);
  }
}
@media (--xl) {
  .xl\:rt-r-pt {
    padding-top: var(--pt-xl);
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*                Right                */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

@breakpoints {
  .rt-r-pr {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-pr-0 {
    padding-right: 0;
  }
  .rt-r-pr-1 {
    padding-right: var(--space-1);
  }
  .rt-r-pr-2 {
    padding-right: var(--space-2);
  }
  .rt-r-pr-3 {
    padding-right: var(--space-3);
  }
  .rt-r-pr-4 {
    padding-right: var(--space-4);
  }
  .rt-r-pr-5 {
    padding-right: var(--space-5);
  }
  .rt-r-pr-6 {
    padding-right: var(--space-6);
  }
  .rt-r-pr-7 {
    padding-right: var(--space-7);
  }
  .rt-r-pr-8 {
    padding-right: var(--space-8);
  }
  .rt-r-pr-9 {
    padding-right: var(--space-9);
  }
  .rt-r-pr-inset {
    padding-right: var(--inset-padding-right);
  }
}

.rt-r-pr {
  padding-right: var(--pr);
}
@media (--xs) {
  .xs\:rt-r-pr {
    padding-right: var(--pr-xs);
  }
}
@media (--sm) {
  .sm\:rt-r-pr {
    padding-right: var(--pr-sm);
  }
}
@media (--md) {
  .md\:rt-r-pr {
    padding-right: var(--pr-md);
  }
}
@media (--lg) {
  .lg\:rt-r-pr {
    padding-right: var(--pr-lg);
  }
}
@media (--xl) {
  .xl\:rt-r-pr {
    padding-right: var(--pr-xl);
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*               Bottom                */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

@breakpoints {
  .rt-r-pb {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-pb-0 {
    padding-bottom: 0;
  }
  .rt-r-pb-1 {
    padding-bottom: var(--space-1);
  }
  .rt-r-pb-2 {
    padding-bottom: var(--space-2);
  }
  .rt-r-pb-3 {
    padding-bottom: var(--space-3);
  }
  .rt-r-pb-4 {
    padding-bottom: var(--space-4);
  }
  .rt-r-pb-5 {
    padding-bottom: var(--space-5);
  }
  .rt-r-pb-6 {
    padding-bottom: var(--space-6);
  }
  .rt-r-pb-7 {
    padding-bottom: var(--space-7);
  }
  .rt-r-pb-8 {
    padding-bottom: var(--space-8);
  }
  .rt-r-pb-9 {
    padding-bottom: var(--space-9);
  }
  .rt-r-pb-inset {
    padding-bottom: var(--inset-padding-bottom);
  }
}

.rt-r-pb {
  padding-bottom: var(--pb);
}
@media (--xs) {
  .xs\:rt-r-pb {
    padding-bottom: var(--pb-xs);
  }
}
@media (--sm) {
  .sm\:rt-r-pb {
    padding-bottom: var(--pb-sm);
  }
}
@media (--md) {
  .md\:rt-r-pb {
    padding-bottom: var(--pb-md);
  }
}
@media (--lg) {
  .lg\:rt-r-pb {
    padding-bottom: var(--pb-lg);
  }
}
@media (--xl) {
  .xl\:rt-r-pb {
    padding-bottom: var(--pb-xl);
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*                Left                 */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

@breakpoints {
  .rt-r-pl {
    /* Keep this selector here to maintain the source order */
  }
  .rt-r-pl-0 {
    padding-left: 0;
  }
  .rt-r-pl-1 {
    padding-left: var(--space-1);
  }
  .rt-r-pl-2 {
    padding-left: var(--space-2);
  }
  .rt-r-pl-3 {
    padding-left: var(--space-3);
  }
  .rt-r-pl-4 {
    padding-left: var(--space-4);
  }
  .rt-r-pl-5 {
    padding-left: var(--space-5);
  }
  .rt-r-pl-6 {
    padding-left: var(--space-6);
  }
  .rt-r-pl-7 {
    padding-left: var(--space-7);
  }
  .rt-r-pl-8 {
    padding-left: var(--space-8);
  }
  .rt-r-pl-9 {
    padding-left: var(--space-9);
  }
  .rt-r-pl-inset {
    padding-left: var(--inset-padding-left);
  }
}

.rt-r-pl {
  padding-left: var(--pl);
}
@media (--xs) {
  .xs\:rt-r-pl {
    padding-left: var(--pl-xs);
  }
}
@media (--sm) {
  .sm\:rt-r-pl {
    padding-left: var(--pl-sm);
  }
}
@media (--md) {
  .md\:rt-r-pl {
    padding-left: var(--pl-md);
  }
}
@media (--lg) {
  .lg\:rt-r-pl {
    padding-left: var(--pl-lg);
  }
}
@media (--xl) {
  .xl\:rt-r-pl {
    padding-left: var(--pl-xl);
  }
}