//margin css @each $property, $value in $spaces { .m-#{$property} { margin: var(--size-#{$property}); } } @each $property, $value in $spaces { .mx-#{$property} { margin-inline: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .my-#{$property} { margin-block: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .ms-#{$property} { margin-inline-start: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .me-#{$property} { margin-inline-end: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .mt-#{$property} { margin-block-start: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .mb-#{$property} { margin-block-end: var(--size-#{$property}) !important; } } // padding css @each $property, $value in $spaces { .p-#{$property} { padding: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .px-#{$property} { padding-inline: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .py-#{$property} { padding-block: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .ps-#{$property} { padding-inline-start: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .pe-#{$property} { padding-inline-end: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .pt-#{$property} { padding-block-start: var(--size-#{$property}) !important; } } @each $property, $value in $spaces { .pb-#{$property} { padding-block-end: var(--size-#{$property}) !important; } } .pe-0 { padding-right: 0!important; } .ms--10px { margin-left: -10px; } .mt--50 { margin-top: -50px; } .mt--100 { margin-top: -100px; } .w-30 { width: 30%; } .w-70 { width: 70%; } /* Gap Css */ @each $property, $value in $spaces { .gap-#{$property} { gap: var(--size-#{$property}); } }