/* Padding utilities
 * Sizes: 0, xx-small, x-small, small, base, medium, large, x-large, xx-large
 * Sides: (all), t (top), r (right), b (bottom), l (left), x (horizontal), y (vertical)
 */

/* All sides */
.p-0         { padding: 0; }
.p-xx-small  { padding: var(--space--xx-small); }
.p-x-small   { padding: var(--space--x-small); }
.p-small     { padding: var(--space--small); }
.p-base      { padding: var(--space--base); }
.p-medium    { padding: var(--space--medium); }
.p-large     { padding: var(--space--large); }
.p-x-large   { padding: var(--space--x-large); }
.p-xx-large  { padding: var(--space--xx-large); }

/* Top */
.p-t-0         { padding-top: 0; }
.p-t-xx-small  { padding-top: var(--space--xx-small); }
.p-t-x-small   { padding-top: var(--space--x-small); }
.p-t-small     { padding-top: var(--space--small); }
.p-t-base      { padding-top: var(--space--base); }
.p-t-medium    { padding-top: var(--space--medium); }
.p-t-large     { padding-top: var(--space--large); }
.p-t-x-large   { padding-top: var(--space--x-large); }
.p-t-xx-large  { padding-top: var(--space--xx-large); }

/* Right */
.p-r-0         { padding-right: 0; }
.p-r-xx-small  { padding-right: var(--space--xx-small); }
.p-r-x-small   { padding-right: var(--space--x-small); }
.p-r-small     { padding-right: var(--space--small); }
.p-r-base      { padding-right: var(--space--base); }
.p-r-medium    { padding-right: var(--space--medium); }
.p-r-large     { padding-right: var(--space--large); }
.p-r-x-large   { padding-right: var(--space--x-large); }
.p-r-xx-large  { padding-right: var(--space--xx-large); }

/* Bottom */
.p-b-0         { padding-bottom: 0; }
.p-b-xx-small  { padding-bottom: var(--space--xx-small); }
.p-b-x-small   { padding-bottom: var(--space--x-small); }
.p-b-small     { padding-bottom: var(--space--small); }
.p-b-base      { padding-bottom: var(--space--base); }
.p-b-medium    { padding-bottom: var(--space--medium); }
.p-b-large     { padding-bottom: var(--space--large); }
.p-b-x-large   { padding-bottom: var(--space--x-large); }
.p-b-xx-large  { padding-bottom: var(--space--xx-large); }

/* Left */
.p-l-0         { padding-left: 0; }
.p-l-xx-small  { padding-left: var(--space--xx-small); }
.p-l-x-small   { padding-left: var(--space--x-small); }
.p-l-small     { padding-left: var(--space--small); }
.p-l-base      { padding-left: var(--space--base); }
.p-l-medium    { padding-left: var(--space--medium); }
.p-l-large     { padding-left: var(--space--large); }
.p-l-x-large   { padding-left: var(--space--x-large); }
.p-l-xx-large  { padding-left: var(--space--xx-large); }

/* Horizontal (left + right) */
.p-x-0         { padding-left: 0; padding-right: 0; }
.p-x-xx-small  { padding-left: var(--space--xx-small); padding-right: var(--space--xx-small); }
.p-x-x-small   { padding-left: var(--space--x-small); padding-right: var(--space--x-small); }
.p-x-small     { padding-left: var(--space--small); padding-right: var(--space--small); }
.p-x-base      { padding-left: var(--space--base); padding-right: var(--space--base); }
.p-x-medium    { padding-left: var(--space--medium); padding-right: var(--space--medium); }
.p-x-large     { padding-left: var(--space--large); padding-right: var(--space--large); }
.p-x-x-large   { padding-left: var(--space--x-large); padding-right: var(--space--x-large); }
.p-x-xx-large  { padding-left: var(--space--xx-large); padding-right: var(--space--xx-large); }

/* Vertical (top + bottom) */
.p-y-0         { padding-top: 0; padding-bottom: 0; }
.p-y-xx-small  { padding-top: var(--space--xx-small); padding-bottom: var(--space--xx-small); }
.p-y-x-small   { padding-top: var(--space--x-small); padding-bottom: var(--space--x-small); }
.p-y-small     { padding-top: var(--space--small); padding-bottom: var(--space--small); }
.p-y-base      { padding-top: var(--space--base); padding-bottom: var(--space--base); }
.p-y-medium    { padding-top: var(--space--medium); padding-bottom: var(--space--medium); }
.p-y-large     { padding-top: var(--space--large); padding-bottom: var(--space--large); }
.p-y-x-large   { padding-top: var(--space--x-large); padding-bottom: var(--space--x-large); }
.p-y-xx-large  { padding-top: var(--space--xx-large); padding-bottom: var(--space--xx-large); }