.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  @media #{$breakpoint-value} {
    .#{$breakpoint-name}--static {
      position: static;
    }

    .#{$breakpoint-name}--relative {
      position: relative;
    }

    .#{$breakpoint-name}--absolute {
      position: absolute;
    }

    .#{$breakpoint-name}--fixed {
      position: fixed;
    }

    .#{$breakpoint-name}--sticky {
      position: sticky;
    }
  }
}

@for $i from -4 through 4 {
  $selector: $i;

  @if ($i < 0) {
    $selector: #{n}#{abs($i)};
  }

  .top-#{$selector} {
    top: $i * 1rem;
  }

  .right-#{$selector} {
    right: $i * 1rem;
  }

  .bottom-#{$selector} {
    bottom: $i * 1rem;
  }

  .left-#{$selector} {
    left: $i * 1rem;
  }
}

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  @media #{$breakpoint-value} {
    @for $i from -4 through 4 {
      $selector: $i;

      @if ($i < 0) {
        $selector: #{n}#{abs($i)};
      }

      .#{$breakpoint-name}--top-#{$selector} {
        top: $i * 1rem;
      }

      .#{$breakpoint-name}--right-#{$selector} {
        right: $i * 1rem;
      }

      .#{$breakpoint-name}--bottom-#{$selector} {
        bottom: $i * 1rem;
      }

      .#{$breakpoint-name}--left-#{$selector} {
        left: $i * 1rem;
      }
    }
  }
}