// Mixins: Breakpoint
// A 16px base value is passed to em() functions within breakpoint mixins due
// to browsers not using the Gesso base font size for media query calculations.

@use 'sass:string';
@use '../config.settings' as *;
@use '../functions' as *;

// Create a min-width media query.
// @param {Number} $breakpoint - width value.
@mixin breakpoint-min($breakpoint) {
  @if $breakpoints-ems {
    $breakpoint: em($breakpoint, 16px);
  }
  @media (min-width: #{$breakpoint}) {
    @content;
  }
}

// Assume min-width if shorthand breakpoint mixin is used.
// @param {Number} $breakpoint - width value.
@mixin breakpoint($breakpoint) {
  @include breakpoint-min($breakpoint) {
    @content;
  }
}

// Create a max-width media query.
// @param {Number} $breakpoint - width value.
// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint value.
@mixin breakpoint-max($breakpoint, $subtract_1_from_max: false) {
  @if $subtract_1_from_max {
    $breakpoint: px($breakpoint) - 1px;
  }
  @if $breakpoints-ems {
    $breakpoint: em($breakpoint, 16px);
  }
  @media (max-width: #{$breakpoint}) {
    @content;
  }
}

// Create a media query with both min-width and max-width.
// @param {Number} $breakpoint-min - width value.
// @param {Number} $breakpoint-max - width value.
// @param {Boolean} $subtract_1_from_max - whether to subtract 1px from $breakpoint-max value.
@mixin breakpoint-min-max(
  $breakpoint-min,
  $breakpoint-max,
  $subtract_1_from_max: false
) {
  @if $subtract_1_from_max {
    $breakpoint-max: px($breakpoint-max) - 1px;
  }
  @if $breakpoints-ems {
    $breakpoint-min: em($breakpoint-min, 16px);
    $breakpoint-max: em($breakpoint-max, 16px);
  }
  @media (min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max}) {
    @content;
  }
}
