// -----------------------------------------------------------------------------
// This file contains all mixins that will help us to generate space classes.
// -----------------------------------------------------------------------------

/// Default Pixel Base Font Size
$base-font-size: 16 !default;

/// Your custom attribute for which you wanted to generate space classes. By
/// default value is `both`. It could be `margin` or `padding`.
/// @example
///   $g-attribute = 'margin';
///   $g-attribute = 'padding';
/// @type String
$g-attribute: 'both' !default;

/// Your custom sides for which you wanted to generate space classes. By default
/// `List` will generate `7` different version of classes on per spacing value.
///  `t` = `top`, `r` = `right`, `b` = `bottom` and `l` = `left`. You could
/// customize `List` according to your need.
/// @example
///   $g-sides = ('t', 'r', 'b', 'l');
///   $g-sides = ('t');
/// @author Ahmad Hussnain
/// @type List
$g-sides: ('t', 'r', 'b', 'l', 'x', 'y', 'xy') !default;

/// Your custom space values for which you wanted to generate space classes.
/// You could customize `List` according to your need.
/// @type List
$g-space-amount: (10, 20, 30, 40, 50, 60, 70, 80, 90, 100) !default;

/// This mixin only helps to generate space classes with `auto` value.
///
/// @param {String} $prefix - This parameter can takes a prefix value like `'u-s-m'`
/// or `'u-s-p'`.
/// @param {String} $attribute - This parameter can takes a value `'both'`,
/// `'margin'` or `'padding'`.
/// @param {List} $sides - This parameter can takes a list of your custom
/// sides i.e `('t','r','b','l','x','y','xy')`.
@mixin auto-space-property-generator($prefix,$attribute,$sides) {
  @each $Value in $sides {
    @if ($Value == 't') {
      .#{$prefix}-#{$Value}-auto {
        #{$attribute}-top: auto;
      }
    } @else if ($Value == 'r') {
      .#{$prefix}-#{$Value}-auto {
        #{$attribute}-right: auto;
      }
    } @else if ($Value == 'b') {
      .#{$prefix}-#{$Value}-auto {
        #{$attribute}-bottom: auto;
      }
    } @else if ($Value == 'l') {
      .#{$prefix}-#{$Value}-auto {
        #{$attribute}-left: auto;
      }
    } @else if ($Value == 'x') {
      .#{$prefix}-#{$Value}-auto {
        #{$attribute}-left: auto;
        #{$attribute}-right: auto;
      }
    } @else if ($Value == 'y') {
      .#{$prefix}-#{$Value}-auto {
        #{$attribute}-top: auto;
        #{$attribute}-bottom: auto;
      }
    } @else if ($Value == 'xy') {
      .#{$prefix}-#{$Value}-auto {
        #{$attribute}: auto;
      }
    }
  }
}
/// This mixin helps to generate only space classes according to your custom
/// sides and custom space amounts.
///
/// @param {String} $prefix - This parameter can takes a prefix value like `'u-s-m'`
/// or `'u-s-p'`.
/// @param {String} $attribute - This parameter can takes a value `'both'`,
/// `'margin'` or `'padding'`.
/// @param {List} $sides - This parameter can takes a list of your custom
/// sides i.e `('t','r','b','l','x','y','xy')`.
/// @param {Number | List} $space-amount - This parameter can takes a number or list
/// of your custom space amounts. If You don't specify `List` then it will
/// generate classes from `0 to 120` pixels that by default converted to rem unit.
@mixin normal-space-property-generator($prefix,$attribute,$sides,$space-amount) {
  @each $Value in $sides {
    @if ($Value == 't') {
      .#{$prefix}-#{$Value}-#{$space-amount} {
        @if ($space-amount == 0) {
          #{$attribute}-top: #{$space-amount};
        } @else {
          #{$attribute}-top: ($space-amount / $base-font-size) * 1rem;
        }
      }
    } @else if ($Value == 'r') {
      .#{$prefix}-#{$Value}-#{$space-amount} {
        @if ($space-amount == 0) {
          #{$attribute}-right: #{$space-amount};
        } @else {
          #{$attribute}-right: ($space-amount / $base-font-size) * 1rem;
        }
      }
    } @else if ($Value == 'b') {
      .#{$prefix}-#{$Value}-#{$space-amount} {
        @if ($space-amount == 0) {
          #{$attribute}-bottom: #{$space-amount};
        } @else {
          #{$attribute}-bottom: ($space-amount / $base-font-size) * 1rem;
        }
      }
    } @else if ($Value == 'l') {
      .#{$prefix}-#{$Value}-#{$space-amount} {
        @if ($space-amount == 0) {
          #{$attribute}-left: #{$space-amount};
        } @else {
          #{$attribute}-left: ($space-amount / $base-font-size) * 1rem;
        }
      }
    } @else if ($Value == 'x') {
      .#{$prefix}-#{$Value}-#{$space-amount} {
        @if ($space-amount == 0) {
          #{$attribute}-left: #{$space-amount};
          #{$attribute}-right: #{$space-amount};
        } @else {
          #{$attribute}-left: ($space-amount / $base-font-size) * 1rem;
          #{$attribute}-right: ($space-amount / $base-font-size) * 1rem;
        }
      }
    } @else if ($Value == 'y') {
      .#{$prefix}-#{$Value}-#{$space-amount} {
        @if ($space-amount == 0) {
          #{$attribute}-top: #{$space-amount};
          #{$attribute}-bottom: #{$space-amount};
        } @else {
          #{$attribute}-top: ($space-amount / $base-font-size) * 1rem;
          #{$attribute}-bottom: ($space-amount / $base-font-size) * 1rem;
        }
      }
    } @else if ($Value == 'xy') {
      .#{$prefix}-#{$Value}-#{$space-amount} {
        @if ($space-amount == 0) {
          #{$attribute}: #{$space-amount};
        } @else {
          #{$attribute}: ($space-amount / $base-font-size) * 1rem;
        }
      }
    }
  }
}
/// This mixin decides what properties, sides and amounts are needed to generate
/// classes.
///
/// @param {String | List} $attribute - This parameter can takes a value
/// `'both'` or a list `('margin','padding')`.
/// @param {List} $sides - This parameter can takes a list of your custom
/// sides i.e `('t','r','b','l','x','y','xy')`.
/// @param {Number | List} $space-amount - This parameter can takes a number or
/// a list of your custom space amounts. If You don't specify `List` then it will
/// generate classes from `0 to 120` pixels.
/// @requires {mixin} auto-space-property-generator
/// @requires {mixin} normal-space-property-generator
@mixin main-generator($attribute,$sides,$space-amount) {
  // If $attribute value is not equal to 'both' then it means user pass only single value.
  @if ($attribute == 'margin') {
    /* Margin with value `auto`. */
    @include auto-space-property-generator('u-s-m', nth($attribute, 1), $sides);
  }
  @else {
    /* Margin with value `auto`. */
    @include auto-space-property-generator('u-s-m', nth($attribute, 1), $sides);
  }
  @if ($space-amount == null) {
    @for $i from 0 through 120 {

      @if ($attribute == 'margin') {
        @include normal-space-property-generator('u-s-m', nth($attribute, 1), $sides, $i);
      } @else if ($attribute == 'padding') {
        @include normal-space-property-generator('u-s-p', nth($attribute, 1), $sides, $i);
      } @else {
        /* Margin with value `#{$i}`. */
        @include normal-space-property-generator('u-s-m', nth($attribute, 1), $sides, $i);
        /* Padding with value `#{$i}`. */
        @include normal-space-property-generator('u-s-p', nth($attribute, 2), $sides, $i);
      }
    }
  } @else {
    @each $custom-space-amount in $space-amount {
      @if ($attribute == 'margin') {
        /* Margin with value `#{$i}`. */
        @include normal-space-property-generator('u-s-m', nth($attribute, 1), $sides, $custom-space-amount);
      } @else if ($attribute == 'padding') {
        /* Padding with value `#{$i}`. */
        @include normal-space-property-generator('u-s-p', nth($attribute, 1), $sides, $custom-space-amount);
      } @else {
        /* Margin with value `#{$i}`. */
        @include normal-space-property-generator('u-s-m', nth($attribute, 1), $sides, $custom-space-amount);
        /* Padding with value `#{$i}`. */
        @include normal-space-property-generator('u-s-p', nth($attribute, 2), $sides, $custom-space-amount);
      }
    }
  }
}
/// Main mixin that invokes all the mixins which help to generate
/// classes, i.e based on user requirements.
///
/// @param {String} $attribute - This parameter can takes a value `'both'`,
/// `'margin'` or `'padding'`.
/// @param {List} $sides - This parameter can takes a list of your custom
/// sides i.e `('t','r','b','l','x','y','xy')`.
/// @param {List} $space-amount [null] - This parameter can takes a list of your
/// custom space amounts. If You don't specify `List` or leave it as optional
/// parameter then it will generate classes from `0 to 120` pixels.
/// @requires {variable} $g-attribute
/// @requires {variable} $g-sides
/// @requires {variable} $g-space-amount
/// @requires {mixin} main-generator
@mixin utility-margin-padding($attribute,$sides,$space-amount: null) {
  @if ($attribute == 'both') {
    $attribute: ('margin', 'padding');
  }
  @include main-generator($attribute, $sides, $space-amount);
}