@use "sass:map" as sassmap;
@use "../tokens/breakpoint";
@use "../tools/map";
@use "../tools/generate";

@mixin order-classes($max: 12) {
  // xs (default) classes
  @for $order from 1 through $max {
    // .order-{n}
    .order-#{$order} {
      order: #{$order} !important;
    }
    // .order-{n}-xs-only
    .order-#{$order}-xs-only {
      @include breakpoint.get(xs, only) {
        order: #{$order} !important;
      }
    }
  }

  // Responsive classes for each breakpoint (except xs)
  @each $breakpoint, $size in breakpoint.$map {
    @if $breakpoint != "xs" {
      @for $order from 1 through $max {
        // .order-{n}-{breakpoint}
        .order-#{$order}#{generate.variant-name($breakpoint, "-")} {
          @include breakpoint.get($breakpoint) {
            order: #{$order} !important;
          }
        }
        // .order-{n}-{breakpoint}-only
        .order-#{$order}#{generate.variant-name($breakpoint, "-")}-only {
          @include breakpoint.get($breakpoint, only) {
            order: #{$order} !important;
          }
        }
      }
    }
  }
}

@layer utilities {
  @include order-classes(2);
}