@use '../../functions/is-length' as *;
@use '../../functions/is-absolute-length' as *;
@use '../../functions/is-calculation' as *;

/// Quickly the adds some default properties for a container element.
///
/// @param {Number | Calculation} $padding-x [1rem] - The x padding of the
/// container on device sizes below 768px.
/// @param {Number | Calculation} $max-width [1140px] - The max width of the
/// container. Recommended to be an absolute length or a calculation that will
/// produce one.
///
/// @group Utilities
///
/// @throw Error, $padding-x is not a length and not a caluclation.
/// @throw Error, $max-width is not a length and not a calculation.
/// @throw Warning, $max-height is not an absolute length and not a calculation.
@mixin container($padding-x, $max-width: 1140px) {
  @if not is-length($padding-x) and not is-calculation($padding-x) {
    @error 'Invalid data type for the $padding-x parameter passed to the ' +
        '[ container() ] mixin. Please ensure that you use pass a length or ' +
        'a calculation for a length';
  }

  @if not is-length($max-width) and not is-calculation($max-width) {
    @error 'Invalid data type for the $max-width parameter passed to the ' +
        '[ container() ] mixin. Please ensure that you use pass a length or ' +
        'a calculation for a length';
  }

  @if not is-absolute-length($max-width) and not is-calculation($max-width) {
    @warn 'You may want to set the $max-width value of the [ container() ] ' +
        'mixin to be an absolute length or a calculation that produces an ' +
        'absolute length.';
  }

  width: 100%;
  padding: 0 $padding-x;
  margin: 0 auto;

  @media screen and (min-width: 48em) {
    max-width: min(96%, $max-width);
    padding: 0;
  }
}