@use '../define/margin-padding.scss' as *;


$common-level-sizes: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  25: 0.75rem,
  3: 1rem,
  35: 1.25rem,
  4: 1.5rem,
  45: 1.75rem,
  5: 3rem,
);

.m {
  &-auto {
    margin: auto!important;
  }
	@each $key, $size in $common-level-sizes {
    &-#{$key} {
      margin: $size;
    }
  }

  &l {
    &-auto {
      margin-left: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        margin-left: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        margin-left: -$size!important;
      }
    }
  }
  &r {
    &-auto {
      margin-right: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        margin-right: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        margin-right: -$size!important;
      }
    }
  }
  &t {
    &-auto {
      margin-top: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        margin-top: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        margin-top: -$size!important;
      }
    }
  }
  &b {
    &-auto {
      margin-bottom: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        margin-bottom: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        margin-bottom: -$size!important;
      }
    }
  }
  &x {
    &-auto {
      margin-left: auto!important;
      margin-right: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        margin-left: $size!important;
        margin-right: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        margin-left: -$size!important;
        margin-right: -$size!important;
      }
    }
  }
  &y {
    &-auto {
      margin-top: auto!important;
      margin-bottom: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        margin-top: $size!important;
        margin-bottom: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        margin-top: -$size!important;
        margin-bottom: -$size!important;
      }
    }
  }
}
.p {
  &-auto {
    padding: auto!important;
  }
	@each $key, $size in $common-level-sizes {
    &-#{$key} {
      padding: $size;
    }
  }

  &l {
    &-auto {
      padding-left: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        padding-left: -$size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        padding-left: -$size!important;
      }
    }
  }
  &r {
    &-auto {
      padding-right: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        padding-right: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        padding-right: -$size!important;
      }
    }
  }
  &t {
    &-auto {
      padding-top: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        padding-top: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        padding-top: -$size!important;
      }
    }
  }
  &b {
    &-auto {
      padding-bottom: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        padding-bottom: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        padding-bottom: -$size!important;
      }
    }
  }
  &x {
    &-auto {
      padding-left: auto!important;
      padding-right: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        padding-left: $size!important;
        padding-right: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        padding-left: -$size!important;
        padding-right: -$size!important;
      }
    }
  }
  &y {
    &-auto {
      padding-top: auto!important;
      padding-bottom: auto!important;
    }
    @each $key, $size in $common-level-sizes {
      &-#{$key} {
        padding-top: $size!important;
        padding-bottom: $size!important;
      }
    }
    @each $key, $size in $common-level-sizes {
      &-n#{$key} {
        padding-top: -$size!important;
        padding-bottom: -$size!important;
      }
    }
  }
}

.h-100vh {
  height: 100vh;
}
.h-0 {
  height: 0;
}
.l-0 {
  left: 0;
}
.r-0 {
  right: 0;
}
.t-0 {
  top: 0;
}
.b-0 {
  bottom: 0;
}

.margin {
	&-all {	
		@each $key, $size in $margins {
			&-#{$key} {
				margin: $size;
			}
		}
	}
	&-top {	
		@each $key, $size in $margins {
			&-#{$key} {
				margin-top: $size;
			}
		}
	}
	&-bottom {
		@each $key, $size in $margins {
			&-#{$key} {
				margin-bottom: $size;
			}
		}
	}
	&-left {
		@each $key, $size in $margins {
			&-#{$key} {
				margin-left: $size;
			}
		}
	}
	&-right {
		@each $key, $size in $margins {
			&-#{$key} {
				margin-right: $size;
			}
		}
	}
	&-none {
		margin: 0;

		&-left-right {
			margin-left: 0;
			margin-right: 0;
		}
		&-top-bottom {
			margin-top: 0;
			margin-bottom: 0;
		}
	}
}
.padding {
	&-all {	
		@each $key, $size in $paddings {
			&-#{$key} {
				padding: $size;
			}
		}
	}
	&-top {
		@each $key, $size in $paddings {
			&-#{$key} {
				padding-top: $size;
			}
		}
	}
	&-bottom {
		@each $key, $size in $paddings {
			&-#{$key} {
				padding-bottom: $size;
			}
		}
	}
	&-left {
		@each $key, $size in $paddings {
			&-#{$key} {
				padding-left: $size;
			}
		}
	}
	&-right {
		@each $key, $size in $paddings {
			&-#{$key} {
				padding-right: $size;
			}
		}
	}
	&-none {
		padding: 0;

		&-left-right {
			padding-left: 0;
			padding-right: 0;
		}
		&-top-bottom {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
}