@import "mixins";

/* Margin Top */

@for $i from 1 through 40 {
  .mt-#{5 * $i} {
    margin-top: 5px * $i;
  }
}

@for $i from 1 through 40 {
  .mt--#{5 * $i} {
    margin-top: -5px * $i;
  }
}

/* Margin Bottom */

@for $i from 1 through 40 {
  .mb-#{5 * $i} {
    margin-bottom: 5px * $i;
  }
}

@for $i from 1 through 40 {
  .mb--#{5 * $i} {
    margin-bottom: -5px * $i;
  }
}

/* Margin Left */

@for $i from 1 through 40 {
  .ml-#{5 * $i} {
    margin-left: 5px * $i;
  }
}

/* Margin Right */

@for $i from 1 through 40 {
  .mr-#{5 * $i} {
    margin-right: 5px * $i;
  }
}

/* Margin LG */

@include mq(lg) {
  @for $i from 1 through 40 {
    .mt-lg-#{5 * $i} {
      margin-top: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mb-lg-#{5 * $i} {
      margin-bottom: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .ml-lg-#{5 * $i} {
      margin-left: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mr-lg-#{5 * $i} {
      margin-right: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mt-lg--#{5 * $i} {
      margin-top: -5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mb-lg--#{5 * $i} {
      margin-bottom: -5px * $i;
    }
  }
  .mt-lg-0 {
    margin-top: 0;
  }
  .mb-lg-0 {
    margin-bottom: 0;
  }
  .ml-lg-0 {
    margin-left: 0;
  }
  .mr-lg-0 {
    margin-right: 0;
  }
}

/* Margin MD */

@include mq(md) {
  @for $i from 1 through 40 {
    .mt-md-#{5 * $i} {
      margin-top: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mb-md-#{5 * $i} {
      margin-bottom: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .ml-md-#{5 * $i} {
      margin-left: 15x * $i;
    }
  }
  @for $i from 1 through 40 {
    .mr-md-#{5 * $i} {
      margin-right: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mt-md--#{5 * $i} {
      margin-top: -5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mb-md--#{5 * $i} {
      margin-bottom: -5px * $i;
    }
  }
  .mt-md-0 {
    margin-top: 0;
  }
  .mb-md-0 {
    margin-bottom: 0;
  }
  .ml-md-0 {
    margin-left: 0;
  }
  .mr-md-0 {
    margin-right: 0;
  }
}

/* Margin XS */

@include mq(xs) {
  @for $i from 1 through 40 {
    .mt-xs-#{5 * $i} {
      margin-top: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mb-xs-#{5 * $i} {
      margin-bottom: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .ml-xs-#{5 * $i} {
      margin-left: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mr-xs-#{5 * $i} {
      margin-right: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mt-xs--#{5 * $i} {
      margin-top: -5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .mb-xs--#{5 * $i} {
      margin-bottom: -5px * $i;
    }
  }
  .mt-xs-0 {
    margin-top: 0;
  }
  .mb-xs-0 {
    margin-bottom: 0;
  }
  .ml-xs-0 {
    margin-left: 0;
  }
  .mr-xs-0 {
    margin-right: 0;
  }
}

/* Padding Top */

@for $i from 1 through 40 {
  .pt-#{5 * $i} {
    padding-top: 5px * $i;
  }
}

@for $i from 1 through 40 {
  .pt--#{5 * $i} {
    padding-top: -5px * $i;
  }
}

/* Padding Bottom */

@for $i from 1 through 40 {
  .pb-#{5 * $i} {
    padding-bottom: 5px * $i;
  }
}

@for $i from 1 through 40 {
  .pb--#{5 * $i} {
    padding-bottom: -5px * $i;
  }
}

/* Padding Left */

@for $i from 1 through 40 {
  .pl-#{5 * $i} {
    padding-left: 5px * $i;
  }
}

/* Padding Right */

@for $i from 1 through 40 {
  .pr-#{5 * $i} {
    padding-right: 5px * $i;
  }
}

/* Padding LG */

@include mq(lg) {
  @for $i from 1 through 40 {
    .pt-lg-#{5 * $i} {
      padding-top: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pb-lg-#{5 * $i} {
      padding-bottom: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pl-lg-#{5 * $i} {
      padding-left: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pr-lg-#{5 * $i} {
      padding-right: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pt-lg--#{5 * $i} {
      padding-top: -5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pb-lg--#{5 * $i} {
      padding-bottom: -5px * $i;
    }
  }
  .pt-lg-0 {
    padding-top: 0;
  }
  .pb-lg-0 {
    padding-bottom: 0;
  }
  .pl-lg-0 {
    padding-left: 0;
  }
  .pr-lg-0 {
    padding-right: 0;
  }
}

/* Padding MD */

@include mq(md) {
  @for $i from 1 through 40 {
    .pt-md-#{5 * $i} {
      padding-top: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pb-md-#{5 * $i} {
      padding-bottom: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pl-md-#{5 * $i} {
      padding-left: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pr-md-#{5 * $i} {
      padding-right: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pt-md--#{5 * $i} {
      padding-top: -5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pb-md--#{5 * $i} {
      padding-bottom: -5px * $i;
    }
  }
  .pt-md-0 {
    padding-top: 0;
  }
  .pb-md-0 {
    padding-bottom: 0;
  }
  .pl-md-0 {
    padding-left: 0;
  }
  .pr-md-0 {
    padding-right: 0;
  }
}

/* Padding XS */

@include mq(xs) {
  @for $i from 1 through 40 {
    .pt-xs-#{5 * $i} {
      padding-top: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pb-xs-#{5 * $i} {
      padding-bottom: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pl-xs-#{5 * $i} {
      padding-left: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pr-xs-#{5 * $i} {
      padding-right: 5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pt-xs--#{5 * $i} {
      padding-top: -5px * $i;
    }
  }
  @for $i from 1 through 40 {
    .pb-xs--#{5 * $i} {
      padding-bottom: -5px * $i;
    }
  }
  .pt-xs-0 {
    padding-top: 0;
  }
  .pb-xs-0 {
    padding-bottom: 0;
  }
  .pl-xs-0 {
    padding-left: 0;
  }
  .pr-xs-0 {
    padding-right: 0;
  }
}