@use "sass:map";

@use "../variables";

@mixin is-smaller($lo) {
  @media (max-width: #{$lo - 0.02px}) {
    @content;
  }
}

@mixin is-smaller-or-equal($lo) {
  @media (max-width: #{$lo}) {
    @content;
  }
}

@mixin is-greater($hi) {
  @media (min-width: #{$hi + 0.02px}) {
    @content;
  }
}

@mixin is-greater-or-equal($hi) {
  @media (min-width: #{$hi}) {
    @content;
  }
}

@mixin is-inbetween($lo, $hi) {
  @media (min-width: #{$lo}) and (max-width: #{$hi}) {
    @content;
  }
}

@function get-breakpoint($breakpoint) {
  @return map.get(variables.$grid-breakpoints, #{$breakpoint});
}