@use "sass:map";

/*#region breakpoints*/
$breakpoints: (
  "2xs": 320px,
  xs: 577px,
  sm: 769px,
  md: 993px,
  lg: 1441px,
  xl: 1921px,
);
/*#endregion breakpoints*/

/**
 * Applies CSS only if the screen width satisfies the given onyx breakpoint.
 * @param {string} $min-max - Whether the breakpoint should be considered as min or max width.
 * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl
 *
 * @example screen(min, sm)
 * @example screen(max, sm)
 */
@mixin screen($min-max, $name) {
  $offset: 0;
  @if ($min-max == "max") {
    $offset: 1;
  }

  @media screen and (#{$min-max}-width: #{map.get($breakpoints, $name) - $offset}) {
    @content;
  }
}

/**
 * Applies CSS only if the container width satisfies the given onyx breakpoint.
 * @param {string} $min-max - Whether the breakpoint should be considered as min or max width.
 * @param {string} $name - name of the onyx breakpoint. One of: 2xs, xs, sm, md, lg or xl
 * @param {number} $offset - optional offset to add to the min/max width. Useful if both min and max are used for the same breakpoint
 *
 * @example container(min, sm)
 * @example container(max, sm)
 */
@mixin container($min-max, $name, $offset: 0, $breaks: $breakpoints) {
  @container (#{$min-max}-width: #{map.get($breaks, $name) + $offset}) {
    @content;
  }
}