@use 'sass:math';
@use '../../functions/conv-to-em' as *;
@use '../../functions/is-length' as *;
@use '../../functions/is-number' as *;
@use '../../functions/strip-unit' as *;

/// Nest a simple max-width media query within a selector or on its own.
/// If $convert is set to true, will convert `rem` or `px` $threshold widths
/// into `em` unit widths.
///
/// @content Styles for screen widths equal to or less than $threshold.
///
/// @param {Number} $threshold - The maximum screen dimension for the
/// style. If a unitless number is passed, is is assumed to be in pixels.
/// @param {Bool} $convert - Attempts to convert the $threshold value into `em`
/// units if the length passed is in `px` or `rem` units.
///
/// @group Utilities
@mixin only-under-width($threshold, $convert: true) {
  @if is-number($threshold) and math.is-unitless($threshold) {
    $threshold: $threshold * 1px;
  }

  @if not is-length($threshold) {
    @error 'Invalid breakpoint $threshold of `#{meta.inspect($threshold)}` ' +
        'passed to the [ only-under-width() ] mixin. The $threshold must be ' +
        'a length value.';
  }

  @if $convert {
    @if math.unit($threshold) == 'rem' {
      $threshold: strip-unit($threshold) * 1em;
    } @else if math.unit($threshold) == 'px' {
      $threshold: conv-to-em($threshold);
    }
  }

  @media screen and (max-width: $threshold) {
    @content;
  }
}

/// Nest a simple max-width media query within a selector or on its own.
/// If $convert is set to true, will convert `rem` or `px` $threshold widths
/// into `em` unit widths.
/// @content Styles for screen widths  than $threshold.
///
/// @param {Number} $threshold - The maximum screen dimension for the
/// style. If a unitless number is passed, is is assumed to be in pixels.
/// @param {Bool} $convert - Attempts to convert the $threshold value into `em`
/// units if the length passed is in `px` or `rem` units.
///
/// @group Utilities
/// @require {mixin} only-under-width
///
/// @alias only-under-width
@mixin target-under-width($threshold) {
  @include only-under-width($threshold, $convert) {
    @content;
  }
}

/// Nest a simple max-width media query within a selector or on its own.
/// If $convert is set to true, will convert `rem` or `px` $threshold widths
/// into `em` unit widths.
/// @content Styles for screen widths  than $threshold.
///
/// @param {Number} $threshold - The maximum screen dimension for the
/// style. If a unitless number is passed, is is assumed to be in pixels.
/// @param {Bool} $convert - Attempts to convert the $threshold value into `em`
/// units if the length passed is in `px` or `rem` units.
///
/// @group Utilities
/// @require {mixin} only-under-width
/// @alias only-under-width
@mixin only-up-to-width($threshold, $convert: true) {
  @include only-under-width($threshold, $convert) {
    @content;
  }
}

/// Nest a simple max-width media query within a selector or on its own.
/// If $convert is set to true, will convert `rem` or `px` $threshold widths
/// into `em` unit widths.
/// @content Styles for screen widths  than $threshold.
///
/// @param {Number} $threshold - The maximum screen dimension for the
/// style. If a unitless number is passed, is is assumed to be in pixels.
/// @param {Bool} $convert - Attempts to convert the $threshold value into `em`
/// units if the length passed is in `px` or `rem` units.
///
/// @group Utilities
/// @require {mixin} only-under-width
/// @alias only-under-width
@mixin target-up-to-width($threshold, $convert: true) {
  @include only-under-width($threshold, $convert) {
    @content;
  }
}

/// Nest a simple max-width media query within a selector or on its own.
/// If $convert is set to true, will convert `rem` or `px` $threshold widths
/// into `em` unit widths.
/// @content Styles for screen widths  than $threshold.
///
/// @param {Number} $threshold - The maximum screen dimension for the
/// style. If a unitless number is passed, is is assumed to be in pixels.
/// @param {Bool} $convert - Attempts to convert the $threshold value into `em`
/// units if the length passed is in `px` or `rem` units.
///
/// @group Utilities
/// @require {mixin} only-under-width
/// @alias only-under-width
@mixin max-width($threshold, $convert: true) {
  @include only-under-width($threshold, $convert) {
    @content;
  }
}