@use "system/breakpoints";
@use "system/units";

$spacing-units: 0 1 2 3 4 5 6 8 11 13 19 25;

/* Breakpoint: Small */
@each $unit in $spacing-units {
  %ods-padding-#{$unit} {
    padding: units.unit-to-rem($unit);
  }
  %ods-margin-#{$unit} {
    margin: units.unit-to-rem($unit);
  }
  %ods-padding-bottom-#{$unit} {
    padding-bottom: units.unit-to-rem($unit);
  }
  %ods-margin-bottom-#{$unit} {
    margin-bottom: units.unit-to-rem($unit);
  }
  %ods-padding-top-#{$unit} {
    padding-top: units.unit-to-rem($unit);
  }
  %ods-margin-top-#{$unit} {
    margin-top: units.unit-to-rem($unit);
  }
  %ods-padding-left-#{$unit} {
    padding-left: units.unit-to-rem($unit);
  }
  %ods-margin-left-#{$unit} {
    margin-left: units.unit-to-rem($unit);
  }
  %ods-padding-right-#{$unit} {
    padding-right: units.unit-to-rem($unit);
  }
  %ods-margin-right-#{$unit} {
    margin-right: units.unit-to-rem($unit);
  }
  %ods-padding-horizontal-#{$unit} {
    padding-left: units.unit-to-rem($unit);
    padding-right: units.unit-to-rem($unit);
  }
  %ods-margin-horizontal-#{$unit} {
    margin-left: units.unit-to-rem($unit);
    margin-right: units.unit-to-rem($unit);
  }
  %ods-padding-vertical-#{$unit} {
    padding-top: units.unit-to-rem($unit);
    padding-bottom: units.unit-to-rem($unit);
  }
  %ods-margin-vertical-#{$unit} {
    margin-top: units.unit-to-rem($unit);
    margin-bottom: units.unit-to-rem($unit);
  }
}

/* Breakpoint: Medium */
@include breakpoints.medium {
  @each $unit in $spacing-units {
    %ods-padding-#{$unit}-breakpoint-medium {
      padding: units.unit-to-rem($unit);
    }
    %ods-margin-#{$unit}-breakpoint-medium {
      margin: units.unit-to-rem($unit);
    }
    %ods-padding-bottom-#{$unit}-breakpoint-medium {
      padding-bottom: units.unit-to-rem($unit);
    }
    %ods-margin-bottom-#{$unit}-breakpoint-medium {
      margin-bottom: units.unit-to-rem($unit);
    }
    %ods-padding-top-#{$unit}-breakpoint-medium {
      padding-top: units.unit-to-rem($unit);
    }
    %ods-margin-top-#{$unit}-breakpoint-medium {
      margin-top: units.unit-to-rem($unit);
    }
    %ods-padding-left-#{$unit}-breakpoint-medium {
      padding-left: units.unit-to-rem($unit);
    }
    %ods-margin-left-#{$unit}-breakpoint-medium {
      margin-left: units.unit-to-rem($unit);
    }
    %ods-padding-right-#{$unit}-breakpoint-medium {
      padding-right: units.unit-to-rem($unit);
    }
    %ods-margin-right-#{$unit}-breakpoint-medium {
      margin-right: units.unit-to-rem($unit);
    }
    %ods-padding-horizontal-#{$unit}-breakpoint-medium {
      padding-left: units.unit-to-rem($unit);
      padding-right: units.unit-to-rem($unit);
    }
    %ods-margin-horizontal-#{$unit}-breakpoint-medium {
      margin-left: units.unit-to-rem($unit);
      margin-right: units.unit-to-rem($unit);
    }
    %ods-padding-vertical-#{$unit}-breakpoint-medium {
      padding-top: units.unit-to-rem($unit);
      padding-bottom: units.unit-to-rem($unit);
    }
    %ods-margin-vertical-#{$unit}-breakpoint-medium {
      margin-top: units.unit-to-rem($unit);
      margin-bottom: units.unit-to-rem($unit);
    }
  }
}

/* Breakpoint: Large */
@include breakpoints.large {
  @each $unit in $spacing-units {
    %ods-padding-#{$unit}-breakpoint-large {
      padding: units.unit-to-rem($unit);
    }
    %ods-margin-#{$unit}-breakpoint-large {
      margin: units.unit-to-rem($unit);
    }
    %ods-padding-bottom-#{$unit}-breakpoint-large {
      padding-bottom: units.unit-to-rem($unit);
    }
    %ods-margin-bottom-#{$unit}-breakpoint-large {
      margin-bottom: units.unit-to-rem($unit);
    }
    %ods-padding-top-#{$unit}-breakpoint-large {
      padding-top: units.unit-to-rem($unit);
    }
    %ods-margin-top-#{$unit}-breakpoint-large {
      margin-top: units.unit-to-rem($unit);
    }
    %ods-padding-left-#{$unit}-breakpoint-large {
      padding-left: units.unit-to-rem($unit);
    }
    %ods-margin-left-#{$unit}-breakpoint-large {
      margin-left: units.unit-to-rem($unit);
    }
    %ods-padding-right-#{$unit}-breakpoint-large {
      padding-right: units.unit-to-rem($unit);
    }
    %ods-margin-right-#{$unit}-breakpoint-large {
      margin-right: units.unit-to-rem($unit);
    }
    %ods-padding-horizontal-#{$unit}-breakpoint-large {
      padding-left: units.unit-to-rem($unit);
      padding-right: units.unit-to-rem($unit);
    }
    %ods-margin-horizontal-#{$unit}-breakpoint-large {
      margin-left: units.unit-to-rem($unit);
      margin-right: units.unit-to-rem($unit);
    }
    %ods-padding-vertical-#{$unit}-breakpoint-large {
      padding-top: units.unit-to-rem($unit);
      padding-bottom: units.unit-to-rem($unit);
    }
    %ods-margin-vertical-#{$unit}-breakpoint-large {
      margin-top: units.unit-to-rem($unit);
      margin-bottom: units.unit-to-rem($unit);
    }
  }
}