@import "../media-queries/media-queries.scss";

$margin-sizes: (
  "auto": auto,
  "0": 0,
  "tiny": 2px,
  "5px": 5px,
  "10px": 10px,
  "15px": 15px,
  "20px": 20px,
  "25px": 25px,
  "30px": 30px,
  "35px": 35px,
  "40px": 40px,
  "45px": 45px,
  "50px": 50px,
  "55px": 55px,
  "60px": 60px,
  "65px": 65px,
  "70px": 70px,
  "75px": 75px,
  "80px": 80px,
  "85px": 85px,
  "90px": 90px,
  "95px": 95px,
  "100px": 100px,
  "105px": 105px,
  "110px": 110px,
  "115px": 115px,
  "120px": 120px,
  "125px": 125px,
  "130px": 130px,
  "135px": 135px,
  "140px": 140px,
  "145px": 145px,
  "150px": 150px,
  "155px": 155px,
  "160px": 160px,
  "165px": 165px,
  "170px": 170px,
  "175px": 175px,
  "180px": 180px,
  "185px": 185px,
  "190px": 190px,
  "195px": 195px,
  "200px": 200px,
);

// margin all no query
@each $name, $size in $margin-sizes {
  .ma-#{$name} {
    margin: $size !important;
  }
}

// margin y no query
@each $name, $size in $margin-sizes {
  .my-#{$name} {
    margin-top: $size !important;
    margin-bottom: $size !important;
  }
}

// margin x no query
@each $name, $size in $margin-sizes {
  .mx-#{$name} {
    margin-left: $size !important;
    margin-right: $size !important;
  }
}

// margin right no query
@each $name, $size in $margin-sizes {
  .mr-#{$name} {
    margin-right: $size !important;
  }
}

// margin left no query
@each $name, $size in $margin-sizes {
  .ml-#{$name} {
    margin-left: $size !important;
  }
}

// margin top no query
@each $name, $size in $margin-sizes {
  .mt-#{$name} {
    margin-top: $size !important;
  }
}

// margin bottom no query
@each $name, $size in $margin-sizes {
  .mb-#{$name} {
    margin-bottom: $size !important;
  }
}

//force move with margin no query
.push-top {
  margin: auto 0 0 0; // top right bottom left
}

.push-bottom {
  margin: 0 0 auto 0; // top right bottom left
}

.push-right {
  margin: 0 auto 0 0; // top right bottom left
}

.push-left {
  margin: 0 0 0 auto; // top right bottom left
}

// margin all md
@each $name, $size in $margin-sizes {
  @include min-md {
    .md\?ma-#{$name} {
      margin: $size !important;
    }
  }
}

// margin y md
@each $name, $size in $margin-sizes {
  @include min-md {
    .md\?my-#{$name} {
      margin-top: $size !important;
      margin-bottom: $size !important;
    }
  }
}

// margin x md
@each $name, $size in $margin-sizes {
  @include min-md {
    .md\?mx-#{$name} {
      margin-left: $size !important;
      margin-right: $size !important;
    }
  }
}

// margin right md
@each $name, $size in $margin-sizes {
  @include min-md {
    .md\?mr-#{$name} {
      margin-right: $size !important;
    }
  }
}

// margin left md
@each $name, $size in $margin-sizes {
  @include min-md {
    .md\?ml-#{$name} {
      margin-left: $size !important;
    }
  }
}

// margin top md
@each $name, $size in $margin-sizes {
  @include min-md {
    .md\?mt-#{$name} {
      margin-top: $size !important;
    }
  }
}

// margin bottom md
@each $name, $size in $margin-sizes {
  @include min-md {
    .md\?mb-#{$name} {
      margin-bottom: $size !important;
    }
  }
}

//force move with margin md
@include min-md {
  .md\?push-top {
    margin: auto 0 0 0; // top right bottom left
  }

  .md\?push-bottom {
    margin: 0 0 auto 0; // top right bottom left
  }

  .md\?push-right {
    margin: 0 auto 0 0; // top right bottom left
  }

  .md\?push-left {
    margin: 0 0 0 auto; // top right bottom left
  }
}

// margin all lg
@each $name, $size in $margin-sizes {
  @include min-lg {
    .lg\?ma-#{$name} {
      margin: $size !important;
    }
  }
}

// margin y lg
@each $name, $size in $margin-sizes {
  @include min-lg {
    .lg\?my-#{$name} {
      margin-top: $size !important;
      margin-bottom: $size !important;
    }
  }
}

// margin x lg
@each $name, $size in $margin-sizes {
  @include min-lg {
    .lg\?mx-#{$name} {
      margin-left: $size !important;
      margin-right: $size !important;
    }
  }
}

// margin right lg
@each $name, $size in $margin-sizes {
  @include min-lg {
    .lg\?mr-#{$name} {
      margin-right: $size !important;
    }
  }
}

// margin left lg
@each $name, $size in $margin-sizes {
  @include min-lg {
    .lg\?ml-#{$name} {
      margin-left: $size !important;
    }
  }
}

// margin top lg
@each $name, $size in $margin-sizes {
  @include min-lg {
    .lg\?mt-#{$name} {
      margin-top: $size !important;
    }
  }
}

// margin bottom lg
@each $name, $size in $margin-sizes {
  @include min-lg {
    .lg\?mb-#{$name} {
      margin-bottom: $size !important;
    }
  }
}

//force move with margin lg
@include min-lg {
  .lg\?push-top {
    margin: auto 0 0 0; // top right bottom left
  }

  .lg\?push-bottom {
    margin: 0 0 auto 0; // top right bottom left
  }

  .lg\?push-right {
    margin: 0 auto 0 0; // top right bottom left
  }

  .lg\?push-left {
    margin: 0 0 0 auto; // top right bottom left
  }
}