@mixin breakpoint($scale, $mobile-last: false, $require-low-height: false) {
  @if $scale == "default" {
    @error "breakpoint(): breakpoint at default scale is meaningless. Mobile first <3 ;)";
  }
  @else if $scale == "low-height" {
    @media (max-height: $breakpoint-low-height) {
       @content;
    }
  }
  @else if $scale == "max-width" {
    @media (min-width: $page-max-width) {
       @content;
    }
  }
  @else if map-has-key($scales, $scale) {
    $map: map-get($scales, $scale);
    $bp: map-get($map, "bp");

    @if $mobile-last {
      @media (max-width: #{$bp * 0.999}) { //max-width breakpoints must be 1px less than min-width breakpoints tp take effect at same width
        @content;
      }
    }
    @else if $require-low-height {
      @media (min-width: $bp) and (min-height: $breakpoint-low-height) {
        @content;
      }
    }
    @else {
      @media (min-width: $bp) {
        @content;
      }
    }
  }
  @else {
    @error "breakpoint(): no scale with name #{$scale}";
  }
}

//add the breakpoint values as css-vars for access in JS
:root {
  @each $scale-name, $properties in $scales {
    @if $scale-name != "default" {
      $map: map-get($scales, $scale-name);
      $bp: map-get($map, "bp");
      --bp-#{$scale-name}: #{$bp};
    }
  }

  --bp-max-width: #{$page-max-width};
  --bp-low-height: #{$breakpoint-low-height};
}