@use './flex.scss';

$units: 5;

@mixin margin($size) {
  margin: var(--unit-#{$size});
}
@mixin margin_classes {
  @for $i from 0 through $units {
    &.m-#{$i} { 
      @include margin($i);
    }
    &.mt-#{$i} { 
      margin-top: var(--unit-#{$i});
    }
    &.mb-#{$i} { 
      margin-bottom: var(--unit-#{$i});
    }
    &.ml-#{$i} { 
      margin-left: var(--unit-#{$i});
    }
    &.mr-#{$i} { 
      margin-right: var(--unit-#{$i});
    }

    &.my-#{$i} { 
      margin-top: var(--unit-#{$i});
      margin-bottom: var(--unit-#{$i});
    }
    &.mx-#{$i} { 
      margin-left: var(--unit-#{$i});
      margin-right: var(--unit-#{$i});
    }
  }
}

@mixin padding($size) {
  padding: var(--unit-#{$size});
}
@mixin padding_classes {
  @for $i from 0 through $units {
    &.p-#{$i} { 
      @include padding($i);
    }
    &.pt-#{$i} { 
      padding-top: var(--unit-#{$i});
    }
    &.pb-#{$i} { 
      padding-bottom: var(--unit-#{$i});
    }
    &.pl-#{$i} { 
      padding-left: var(--unit-#{$i});
    }
    &.pr-#{$i} { 
      padding-right: var(--unit-#{$i});
    }

    &.py-#{$i} { 
      padding-top: var(--unit-#{$i});
      padding-bottom: var(--unit-#{$i});
    }
    &.px-#{$i} { 
      padding-left: var(--unit-#{$i});
      padding-right: var(--unit-#{$i});
    }
  }
}