@import '../classes/index';

$responsive-classes-maps: (
  ($steller-modules),
  ($colors-classes-map),
  ($grid-columns-rows-classes-map),
  ($flexbox-classes-map),
  ($sizing-classes-map),
  ($spacing-classes-map),
  ($layout-classes-map),
  ($typography-classes-map),
  ($borders-classes-map),
  ($effects-classes-map),
  ($interactivity-classes-map),
  ($backgrounds-classes-map),
  ($effects-classes-map),
  ($tables-classes-map),
  ($svg-classes-map),
  ($gradients-classes-map),
  ($overflow-classes-map),
  ($transition-classes-map),
);

$index: 0;

@each $breakpoint-label, $breakpoint-value in $steller-breakpoints {
  $index: $index + 1;

  @if $index == 1 {
    @each $classes-map in $responsive-classes-maps {
      @each $class-name, $attributes-map in $classes-map {
        .#{$class-name},
        .#{$breakpoint-label}\:#{$class-name} {
          @each $key, $value in $attributes-map {
            #{inspect($key)}: #{inspect($value)};
          }
        }
      }
    }
  }

  @else {
    @include above-breakpoint($breakpoint-label) {
      @each $classes-map in $responsive-classes-maps {
        @each $class-name, $attributes-map in $classes-map {
          .#{$breakpoint-label}\:#{$class-name} {
            @each $key, $value in $attributes-map {
              #{inspect($key)}: #{inspect($value)};
            }
          }
        }
      }
    }
  }
}