// // Margins //

@mixin margin-spaces($media-type) {

$media-value: 0;

@if $media-type == xs {
  $media-value: 0;
  $media-type: '';
} @else if $media-type == sm {
  $media-value: $g-sm;
  $media-type: --sm;
} @else if $media-type == md {
  $media-value: $g-md;
  $media-type: --md;
} @else if $media-type == lg {
  $media-value: $g-lg;
  $media-type: --lg;
}  @else { /* P */
  $media-value: $g-xl;
  $media-type: --xl;
}

@media (min-width: #{$media-value}) {
  // Zeroing
  .g-ma-0#{$media-type} {
    margin: 0 !important;
  }
  .g-mx-0#{$media-type} {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .g-my-0#{$media-type} {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .g-ml-0#{$media-type} {
    margin-left: 0 !important;
  }
  .g-mr-0#{$media-type} {
    margin-right: 0 !important;
  }
  .g-mt-0#{$media-type} {
    margin-top: 0 !important;
  }
  .g-mb-0#{$media-type} {
    margin-bottom: 0 !important;
  }

  // Margin X
  $i: 1;
  @while $i < 11 {
    .g-mx-#{$i}#{$media-type} {
      @include px-to-rem(margin-left, $i*1px !important);
      @include px-to-rem(margin-right, $i*1px !important);
    }
    $i: $i + 1;
  }
  $i: 10;
  @while $i < 101 {
    .g-mx-#{$i}#{$media-type} {
      @include px-to-rem(margin-left, $i*1px !important);
      @include px-to-rem(margin-right, $i*1px !important);
    }
    $i: $i + 5;
  }

  // Margin Y
  $i: 1;
  @while $i < 11 {
    .g-my-#{$i}#{$media-type} {
      @include px-to-rem(margin-top, $i*1px !important);
      @include px-to-rem(margin-bottom, $i*1px !important);
    }
    $i: $i + 1;
  }
  $i: 10;
  @while $i < 101 {
    .g-my-#{$i}#{$media-type} {
      @include px-to-rem(margin-top, $i*1px !important);
      @include px-to-rem(margin-bottom, $i*1px !important);
    }
    $i: $i + 5;
  }

  // Margin Top
  $i: 1;
  @while $i < 21 {
    .g-mt-#{$i}#{$media-type} {
      @include px-to-rem(margin-top, $i*1px !important);
    }
    .g-mt-minus-#{$i}#{$media-type} {
      @include px-to-rem(margin-top, -($i*1px) !important);
    }
    $i: $i + 1;
  }
  $i: 10;
  @while $i < 171 {
    .g-mt-#{$i}#{$media-type} {
      @include px-to-rem(margin-top, $i*1px !important);
    }
    .g-mt-minus-#{$i}#{$media-type} {
      @include px-to-rem(margin-top, -($i*1px) !important);
    }
    $i: $i + 5;
  }

  // Margin Bottom
  $i: 1;
  @while $i < 21 {
    .g-mb-#{$i}#{$media-type} {
      @include px-to-rem(margin-bottom, $i*1px !important);
    }
    .g-mb-minus-#{$i}#{$media-type} {
      @include px-to-rem(margin-bottom, -($i*1px) !important);
    }
    $i: $i + 1;
  }
  $i: 10;
  @while $i < 171 {
    .g-mb-#{$i}#{$media-type} {
      @include px-to-rem(margin-bottom, $i*1px !important);
    }
    $i: $i + 5;
  }

  // Margin Left
  $i: 1;
  @while $i < 11 {
    .g-ml-#{$i}#{$media-type} {
      @include px-to-rem(margin-left, $i*1px !important);
    }
    .g-ml-minus-#{$i}#{$media-type} {
      @include px-to-rem(margin-left, -($i*1px) !important);
    }
    $i: $i + 1;
  }
  $i: 5;
  @while $i < 51 {
    .g-ml-#{$i}#{$media-type} {
      @include px-to-rem(margin-left, $i*1px !important);
    }
    .g-ml-minus-#{$i}#{$media-type} {
      @include px-to-rem(margin-left, -($i*1px) !important);
    }
    $i: $i + 5;
  }

  // Margin Right
  $i: 1;
  @while $i < 11 {
    .g-mr-#{$i}#{$media-type} {
      @include px-to-rem(margin-right, $i*1px !important);
    }
    .g-mr-minus-#{$i}#{$media-type} {
      @include px-to-rem(margin-right, -($i*1px) !important);
    }
    $i: $i + 1;
  }
  $i: 5;
  @while $i < 51 {
    .g-mr-#{$i}#{$media-type} {
      @include px-to-rem(margin-right, $i*1px !important);
    }
    $i: $i + 5;
  }
}

}