@charset "utf-8";
@use "sass:math";
/* CSS Document */

@import "variables";
@import "mixin";

// margin,padding,font-size
@for $i from 0 through 200 {
	$n: null;
	@if $i < 10 {
		$n: "0#{$i}";
	} @else {
		$n: $i;
	}
	.fz-#{$n} {
		// font-size: #{$i / 10}rem;
		// font-size: #{math.div($i, 10)}rem;
		font-size: #{$i}px;
	}
	.mt-#{$n} {
    margin-top: #{$i}px;
  }
	.ml-#{$n} {
    margin-left: #{$i}px;
  }
	.mr-#{$n} {
    margin-right: #{$i}px;
  }
	.mb-#{$n} {
    margin-bottom: #{$i}px;
  }
	.pt-#{$n} {
    padding-top: #{$i}px;
  }
	.pl-#{$n} {
    padding-left: #{$i}px;
  }
	.pr-#{$n} {
    padding-right: #{$i}px;
  }
	.pb-#{$n} {
    padding-bottom: #{$i}px;
  }
}
.ml-auto {
	margin-left: auto;
}
.mr-auto {
	margin-right: auto;
}

@each $key, $val in $breakpoints {
	@include media_query($key) {
		@for $i from 0 through 200 {
			$n: null;
			@if $i < 10 {
				$n: "0#{$i}";
			} @else {
				$n: $i;
			}
			.fz-#{$key}-#{$n}{
				// font-size: #{$i / 10}rem;
				// font-size: #{math.div($i, 10)}rem;
				font-size: #{$i}px;
			}
			.mt-#{$key}-#{$n}{
				margin-top: #{$i}px;
			}
			.ml-#{$key}-#{$n}{
				margin-left: #{$i}px;
			}
			.mr-#{$key}-#{$n}{
				margin-right: #{$i}px;
			}
			.mb-#{$key}-#{$n}{
				margin-bottom: #{$i}px;
			}
			.pt-#{$key}-#{$n}{
				padding-top: #{$i}px;
			}
			.pl-#{$key}-#{$n}{
				padding-left: #{$i}px;
			}
			.pr-#{$key}-#{$n}{
				padding-right: #{$i}px;
			}
			.pb-#{$key}-#{$n}{
				padding-bottom: #{$i}px;
			}
		}
	}
}

@each $key, $val in $breakpoints {
	@include media_query($key) {
		.ml-#{$key}-auto {
			margin-left: auto;
		}
	}
}

@each $key, $val in $breakpoints {
	@include media_query($key) {
		.mr-#{$key}-auto {
			margin-right: auto;
		}
	}
}



// font-weight
@for $i from 1 through 9 {
	.fw-#{$i * 100} {
		font-weight: #{$i * 100};
	}
}
@each $key, $val in $breakpoints {
	@include media_query($key) {
		@for $i from 1 through 9 {
			.fw-#{$key}-#{$i * 100} {
				font-weight: #{$i * 100};
			}
		}
	}
}



// line-height
@for $i from 10 through 30 {
	.lh-#{$i} {
		// line-height: #{$i / 10};
		line-height: #{math.div($i, 10)};
	}
}
@each $key, $val in $breakpoints {
	@include media_query($key) {
		@for $i from 10 through 30 {
			.lh-#{$key}-#{$i} {
				// line-height: #{$i / 10};
				line-height: #{math.div($i, 10)};
			}
		}
	}
}



// width
@for $i from 1 through 100 {
	.width-#{$i} {
		width: percentage(math.div($i, 100));
	}
}
@each $key, $val in $breakpoints {
	@include media_query($key) {
		@for $i from 1 through 100 {
			.width-#{$key}-#{$i} {
				width: percentage(math.div($i, 100));
			}
		}
	}
}