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

@each $unit in spacing.$spacing-units {
  .ods-padding-#{$unit} {
    @extend %ods-padding-#{$unit};
  }
  .ods-margin-#{$unit} {
    @extend %ods-margin-#{$unit};
  }
  .ods-padding-bottom-#{$unit} {
    @extend %ods-padding-bottom-#{$unit};
  }
  .ods-margin-bottom-#{$unit} {
    @extend %ods-margin-bottom-#{$unit};
  }
  .ods-padding-top-#{$unit} {
    @extend %ods-padding-top-#{$unit};
  }
  .ods-margin-top-#{$unit} {
    @extend %ods-margin-top-#{$unit};
  }
  .ods-padding-left-#{$unit} {
    @extend %ods-padding-left-#{$unit};
  }
  .ods-margin-left-#{$unit} {
    @extend %ods-margin-left-#{$unit};
  }
  .ods-padding-right-#{$unit} {
    @extend %ods-padding-right-#{$unit};
  }
  .ods-margin-right-#{$unit} {
    @extend %ods-margin-right-#{$unit};
  }
  .ods-padding-horizontal-#{$unit} {
    @extend %ods-padding-horizontal-#{$unit};
  }
  .ods-margin-horizontal-#{$unit} {
    @extend %ods-margin-horizontal-#{$unit};
  }
  .ods-padding-vertical-#{$unit} {
    @extend %ods-padding-vertical-#{$unit};
  }
  .ods-margin-vertical-#{$unit} {
    @extend %ods-margin-vertical-#{$unit};
  }
}

// generate spacing classes for tablet
@include breakpoints.medium {
  @each $unit in spacing.$spacing-units {
    .ods-padding-#{$unit}-breakpoint-medium {
      @extend %ods-padding-#{$unit}-breakpoint-medium;
    }
    .ods-margin-#{$unit}-breakpoint-medium {
      @extend %ods-margin-#{$unit}-breakpoint-medium;
    }
    .ods-padding-bottom-#{$unit}-breakpoint-medium {
      @extend %ods-padding-bottom-#{$unit}-breakpoint-medium;
    }
    .ods-margin-bottom-#{$unit}-breakpoint-medium {
      @extend %ods-margin-bottom-#{$unit}-breakpoint-medium;
    }
    .ods-padding-top-#{$unit}-breakpoint-medium {
      @extend %ods-padding-top-#{$unit}-breakpoint-medium;
    }
    .ods-margin-top-#{$unit}-breakpoint-medium {
      @extend %ods-margin-top-#{$unit}-breakpoint-medium;
    }
    .ods-padding-left-#{$unit}-breakpoint-medium {
      @extend %ods-padding-left-#{$unit}-breakpoint-medium;
    }
    .ods-margin-left-#{$unit}-breakpoint-medium {
      @extend %ods-margin-left-#{$unit}-breakpoint-medium;
    }
    .ods-padding-right-#{$unit}-breakpoint-medium {
      @extend %ods-padding-right-#{$unit}-breakpoint-medium;
    }
    .ods-margin-right-#{$unit}-breakpoint-medium {
      @extend %ods-margin-right-#{$unit}-breakpoint-medium;
    }
    .ods-padding-horizontal-#{$unit}-breakpoint-medium {
      @extend %ods-padding-horizontal-#{$unit}-breakpoint-medium;
    }
    .ods-margin-horizontal-#{$unit}-breakpoint-medium {
      @extend %ods-margin-horizontal-#{$unit}-breakpoint-medium;
    }
    .ods-padding-vertical-#{$unit}-breakpoint-medium {
      @extend %ods-padding-vertical-#{$unit}-breakpoint-medium;
    }
    .ods-margin-vertical-#{$unit}-breakpoint-medium {
      @extend %ods-margin-vertical-#{$unit}-breakpoint-medium;
    }
  }
}

// generate spacing classes for desktop
@include breakpoints.large {
  @each $unit in spacing.$spacing-units {
    .ods-padding-#{$unit}-breakpoint-large {
      @extend %ods-padding-#{$unit}-breakpoint-large;
    }
    .ods-margin-#{$unit}-breakpoint-large {
      @extend %ods-margin-#{$unit}-breakpoint-large;
    }
    .ods-padding-bottom-#{$unit}-breakpoint-large {
      @extend %ods-padding-bottom-#{$unit}-breakpoint-large;
    }
    .ods-margin-bottom-#{$unit}-breakpoint-large {
      @extend %ods-margin-bottom-#{$unit}-breakpoint-large;
    }
    .ods-padding-top-#{$unit}-breakpoint-large {
      @extend %ods-padding-top-#{$unit}-breakpoint-large;
    }
    .ods-margin-top-#{$unit}-breakpoint-large {
      @extend %ods-margin-top-#{$unit}-breakpoint-large;
    }
    .ods-padding-left-#{$unit}-breakpoint-large {
      @extend %ods-padding-left-#{$unit}-breakpoint-large;
    }
    .ods-margin-left-#{$unit}-breakpoint-large {
      @extend %ods-margin-left-#{$unit}-breakpoint-large;
    }
    .ods-padding-right-#{$unit}-breakpoint-large {
      @extend %ods-padding-right-#{$unit}-breakpoint-large;
    }
    .ods-margin-right-#{$unit}-breakpoint-large {
      @extend %ods-margin-right-#{$unit}-breakpoint-large;
    }
    .ods-padding-horizontal-#{$unit}-breakpoint-large {
      @extend %ods-padding-horizontal-#{$unit}-breakpoint-large;
    }
    .ods-margin-horizontal-#{$unit}-breakpoint-large {
      @extend %ods-margin-horizontal-#{$unit}-breakpoint-large;
    }
    .ods-padding-vertical-#{$unit}-breakpoint-large {
      @extend %ods-padding-vertical-#{$unit}-breakpoint-large;
    }
    .ods-margin-vertical-#{$unit}-breakpoint-large {
      @extend %ods-margin-vertical-#{$unit}-breakpoint-large;
    }
  }
}