@charset 'UTF-8';

////
/// Flavor SCSS Mixins Margin
/// @group mixins-margin
/// @author blackmirror1980
////

/// Margin modes
///
/// @access private
/// @type list
$margin-modes: array-concat((auto), $css-default-modes);

/// Checks if something is a margin value
///
/// @access public
/// @param {string | length} $m - the margin value (e.g. `auto` or `20px`)
/// @return {boolean} - true if is margin value
@function is-margin($m) {
  @return is-defined($m) and (array-contains($margin-modes, $m) or is-length($m));
}

/// Margin direction mixin
///
/// @example scss - Usage
///   .margin-direction-element {
///     @include margin-direction(5px);
///   }
///
/// @example css - Output
///   .margin-direction-element {
///     margin: 5px;
///   }
///
/// @example scss - Usage - margin-left
///   .margin-direction-element {
///     @include margin-direction(5px, margin-left);
///   }
///
/// @example css - Output - margin-left
///   .margin-direction-element {
///     margin-left: 5px;
///   }
/// @access public
/// @param {string | length} $m - the margin value (e.g. `auto` or `20px`)
/// @param {string} $margin-direction-selector [margin] - the margin direction (e.g. `margin-top`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin margin-direction($m, $margin-direction-selector: margin, $important: false) {
  @if is-defined($m) {
    @if is-margin($m) {
      #{$margin-direction-selector}: $m important($important);
    }
    @else {
      @warn '`#{$margin-direction-selector}: #{$m}` is not a valid margin value';
    }
  }
}

/// Margin top mixin
///
/// @example scss - Usage
///   .margin-top-element {
///     @include margin-top(5px);
///   }
///
/// @example css - Output
///   .margin-top-element {
///     margin-top: 5px;
///   }
/// @see {mixin} margin-direction
/// @access public
/// @param {string | length} $m - the margin value (e.g. `auto` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin margin-top($m, $important: false) {
  @include margin-direction($m, margin-top, $important);
}

/// Margin right mixin
///
/// @example scss - Usage
///   .margin-right-element {
///     @include margin-right(5px);
///   }
///
/// @example css - Output
///   .margin-right-element {
///     margin-right: 5px;
///   }
/// @see {mixin} margin-direction
/// @access public
/// @param {string | length} $m - the margin value (e.g. `auto` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin margin-right($m, $important: false) {
  @include margin-direction($m, margin-right, $important);
}

/// Margin bottom mixin
///
/// @example scss - Usage
///   .margin-bottom-element {
///     @include margin-bottom(5px);
///   }
///
/// @example css - Output
///   .margin-bottom-element {
///     margin-bottom: 5px;
///   }
/// @see {mixin} margin-direction
/// @access public
/// @param {string | length} $m - the margin value (e.g. `auto` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin margin-bottom($m, $important: false) {
  @include margin-direction($m, margin-bottom, $important);
}

/// Margin left mixin
///
/// @example scss - Usage
///   .margin-left-element {
///     @include margin-left(5px);
///   }
///
/// @example css - Output
///   .margin-left-element {
///     margin-left: 5px;
///   }
/// @see {mixin} margin-direction
/// @access public
/// @param {string | length} $m - the margin value (e.g. `auto` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin margin-left($m, $important: false) {
  @include margin-direction($m, margin-left, $important);
}

/// Margin mixin
///
/// @example scss - Usage - single value
///   .margin-element {
///     @include margin(5px);
///   }
///
/// @example css - Output - single value
///   .margin-element {
///     margin-top: 5px;
///     margin-right: 5px;
///     margin-bottom: 5px;
///     margin-left: 5px;
///   }
///
/// @example scss - Usage - two values
///   .margin-element {
///     @include margin(5px 10px);
///   }
///
/// @example css - Output - two values
///   .margin-element {
///     margin-top: 5px;
///     margin-right: 10px;
///     margin-bottom: 5px;
///     margin-left: 10px;
///   }
///
/// @example scss - Usage - three values
///   .margin-element {
///     @include margin(5px 10px 7px);
///   }
///
/// @example css - Output - three values
///   .margin-element {
///     margin-top: 5px;
///     margin-right: 10px;
///     margin-bottom: 7px;
///     margin-left: 10px;
///   }
///
/// @example scss - Usage - four values
///   .margin-element {
///     @include margin(5px 10px 7px 15px);
///   }
///
/// @example css - Output - four values
///   .margin-element {
///     margin-top: 5px;
///     margin-right: 10px;
///     margin-bottom: 7px;
///     margin-left: 15px;
///   }
///
/// @example scss - Usage - null values
///   .margin-element {
///     @include margin(5px null null 15px);
///   }
///
/// @example css - Output - null values
///   .margin-element {
///     margin-top: 5px;
///     margin-left: 15px;
///   }
/// @access public
/// @param {string | length} $m - the margin value (e.g. `auto` or `20px`)
/// @param {boolean} $important [false] - if true, will render the important rule
@mixin margin($m, $important: false) {
  $margin-top: nth-value($m, 1, 0);
  $margin-right: nth-value($m, 2, $margin-top);
  $margin-bottom: nth-value($m, 3, $margin-top);
  $margin-left: nth-value($m, 4, $margin-right);

  @include margin-top($margin-top, $important);
  @include margin-right($margin-right, $important);
  @include margin-bottom($margin-bottom, $important);
  @include margin-left($margin-left, $important);
}