@use 'sass:map';

/* stylelint-disable length-zero-no-unit */
$map: (
  // ВАЖНО: тут именно 0px а не 0 - в Safari нельзя использовать @media (min-width: 0)
  mxs: 0px,

  ms: 480px,
  mm: 720px,
  ml: 840px,
  xs: 1024px,
  s: 1280px,
  m: 1440px,
  l: 1600px,
  xl: 1920px
) !default;
/* stylelint-enable length-zero-no-unit */

/**
 * ВАЖНО: здесь должны быть только утилиты позволяющие применить стили ">=" либо "<" начала диапазона (breakpoint range).
 * Не должно возникать ситуаций в которых нужно применить стили "<=" или ">" начала диапазона.
 */

@mixin greaterThanOrEqual($breakpoint) {
  @if map.has-key($map, $breakpoint) {
    @media (min-width: map.get($map, $breakpoint)) {
      @content;
    }
  } @else {
    @warn 'No such breakpoint `#{$breakpoint}`. Available values: #{map.keys($map)}.';
  }
}

@mixin lessThan($breakpoint) {
  @if map.has-key($map, $breakpoint) {
    @media (max-width: (map.get($map, $breakpoint) - 1px)) {
      @content;
    }
  } @else {
    @warn 'No such breakpoint `#{$breakpoint}`. Available values: #{map.keys($map)}.';
  }
}

@mixin gte($args...) {
  @include greaterThanOrEqual($args...) {
    @content;
  }
}

@mixin lt($args...) {
  @include lessThan($args...) {
    @content;
  }
}