@import "01-variables/01-variables-breakpoints.scss";

/* =============================================================================================================================
    Spacing Classes
   ============================================================================================================================= */

/*
 *  Add Margin to Element
 *
 *  Usage:
 *   .margin-left-5--mobile
 *   .no-padding--top
 *   .hide
 */

// $margin: "10", "20", "30";
// $orientation: "bottom", "top", "left", "right";
// $devices: "desktop", "mobile";

// @each $direction in $orientation {
//     @each $px in $margin {
//         @each $size in $devices {
//             @if $size == desktop {
//                 .margin-#{$direction}-#{$px}--#{$size} {
//                     @include range-desktop {
//                         margin-#{$direction}: #{$px}px;
//                     }
//                 }
//                 .padding-#{$direction}-#{$px}--#{$size} {
//                     @include range-desktop {
//                         padding-#{$direction}: #{$px}px;
//                     }
//                 }
//             } @else if $size == mobile {
//                 .margin-#{$direction}-#{$px}--#{$size} {
//                     @include range-mobile {
//                         margin-#{$direction}: #{$px}px;
//                     }
//                 }
//                 .padding-#{$direction}-#{$px}--#{$size} {
//                     @include range-mobile {
//                         padding-#{$direction}: #{$px}px;
//                     }
//                 }
//             }
//         }
//     }
// }

// No padding classes

.no-padding {
  padding: 0px !important;

  &--mobile {
    padding: 0px;
    @include range-mobile {
      padding: 0px !important;
    }
  }
  &--desktop {
    @include range-desktop {
      padding: 0px !important;
    }
  }
}

.no-padding-top {
  padding-top: 0px !important;

  &--mobile {
    @include range-mobile {
      padding-top: 0px !important;
    }
  }
  &--desktop {
    @include range-desktop {
      padding-top: 0px !important;
    }
  }
}

.no-padding-right {
  padding-right: 0px !important;

  &--mobile {
    @include range-mobile {
      padding-right: 0px !important;
    }
  }
  &--desktop {
    @include range-desktop {
      padding-right: 0px !important;
    }
  }
}

.no-padding-bottom {
  padding-bottom: 0px !important;

  &--mobile {
    @include range-mobile {
      padding-bottom: 0px !important;
    }
  }
  &--desktop {
    @include range-desktop {
      padding-bottom: 0px !important;
    }
  }
}

.no-padding-left {
  padding-left: 0px !important;

  &--mobile {
    @include range-mobile {
      padding-left: 0px !important;
    }
  }
  &--desktop {
    @include range-desktop {
      padding-left: 0px !important;
    }
  }
}