// These are modeled after the bootstrap helper classes.

// The premise is mc-m is the base for margins and mc-p is
// the base for padding.  Here are some examples:

// mc-m-6 = margin "6 scale" all around
// mc-mt-6 = margin-top "6"
// mc-mr-6 = margin-right "6"
// mc-mb-6 = margin-bottom "6"
// mc-ml-6 = margin-left "6"

// Margins all around
.mc-m {
  @for $i from $scale-begin through $scale-end {
    &-#{$i} { margin: var(--mc-scale-#{$i}); }
    &-n#{$i} { margin: calc(var(--mc-scale-#{$i}) * -1); }
  }
}

// Margins - x axis only
.mc-mx {
  @for $i from $scale-begin through $scale-end {
    &-#{$i} {
      @include step(margin-left, $i);
      @include step(margin-right, $i);
    }

    &-n#{$i} {
      margin-left: calc(var(--mc-scale-#{$i}) * -1);
      margin-right: calc(var(--mc-scale-#{$i}) * -1);
    }
  }

  &-auto {
    margin-left: auto;
    margin-right: auto;
  }
}

// Margins - y axis only
.mc-my {
  @for $i from $scale-begin through $scale-end {
    &-#{$i} {
      @include step(margin-top, $i);
      @include step(margin-bottom, $i);
    }
    &-n#{$i} {
      margin-top: calc(var(--mc-scale-#{$i}) * -1);
      margin-bottom: calc(var(--mc-scale-#{$i}) * -1);
    }
  }

  &-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
}

// Margins - top only
.mc-mt {
  @for $i from $scale-begin through $scale-end {
    &-#{$i} { margin-top: var(--mc-scale-#{$i}); }
    &-n#{$i} { margin-top: calc(var(--mc-scale-#{$i}) * -1); }
  }

  &-auto { margin-top: auto; }
}

// Margins - right only
.mc-mr {
  @for $i from $scale-begin through $scale-end {
    &-#{$i} { margin-right: var(--mc-scale-#{$i}); }
    &-n#{$i} { margin-right: calc(var(--mc-scale-#{$i}) * -1); }
  }

  &-auto { margin-right: auto; }
}

// Margins - bottom only
.mc-mb {
  @for $i from $scale-begin through $scale-end {
    &-#{$i} { margin-bottom: var(--mc-scale-#{$i}); }
    &-n#{$i} { margin-bottom: calc(var(--mc-scale-#{$i}) * -1); }
  }

  &-auto { margin-bottom: auto; }
}

// Margins - left only
.mc-ml {
  @for $i from $scale-begin through $scale-end {
    &-#{$i} { margin-left: var(--mc-scale-#{$i}); }
    &-n#{$i} { margin-left: calc(var(--mc-scale-#{$i}) * -1); }
  }

  &-auto { margin-left: auto; }
}