@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
@use '~@moda/om';

.Breakpoint {
  $onePixel: math.div(1, 16);
  $keys: map.keys(om.$breakpoints);

  display: none;

  @for $i from 1 through list.length($keys) {
    $key: list.nth($keys, $i);
    $width: map.get(om.$breakpoints, $key);

    $prevWidth: null;
    @if $i - 1 > 1 {
      $prevKey: list.nth($keys, $i - 1);
      $prevWidth: map.get(om.$breakpoints, $prevKey) + $onePixel;
    } @else {
      $prevWidth: 0;
    }

    &--at-#{$key} {
      @media (min-width: $prevWidth) and (max-width: $width) {
        display: block;
      }
    }

    &--gt-#{$key} {
      @media (min-width: $width + $onePixel) {
        display: block;
      }
    }

    &--lt-#{$key} {
      @media (max-width: $width) {
        display: block;
      }
    }
  }
}