// spacing
$spacing: 50, 40, 30, 25, 24, 20, 16, 15, 14, 12, 10, 8, 5, 4, 3, 2, 1, 0;
@each $i in $spacing {
  @include set-spacing($i);

  @include set-spacing-negative($i);
}
.mt-auto {
  margin-top: auto;
}
.mr-auto {
  margin-right: auto;
}
.mb-auto {
  margin-bottom: auto;
}
.ml-auto {
  margin-left: auto;
}

// font
$fonts-size: 20, 18, 16, 15, 14, 13, 12, 11, 10;
@each $i in $fonts-size {
  .font-#{$i} {
    font-size: #{$i}px;
  }
}

$fonts-weight:
  // 300,
  // 400,
  500, 600, 700,
  // 800,
  // 900,
;
@each $i in $fonts-weight {
  .font-#{$i} {
    font-weight: $i;
  }
}
.font-italic {
  font-style: italic;
}

// text style
$text: center, left, right, justify;
@each $i in $text {
  .text-#{$i} {
    text-align: $i;
  }
}

.text-underline {
  text-decoration: underline;
}
.text-nowrap {
  white-space: nowrap;
}

// color
.color-primary {
  color: $color-primary;
}
.color-support {
  color: $color-text;
}
.color-danger {
  color: $color-primary;
}
.color-link {
  color: $color-primary;

  &:hover,
  &:focus {
    color: $color-primary;
  }
}
.color-grey {
  color: $color-text;
}
.color-light-grey {
  color: $color-text;
}
.color-white {
  color: #fff;
}
.color-black {
  color: #000;
}
.color-text {
  color: $color-text;
}

// line height
.line-1 {
  line-height: 1;
}
.line-11 {
  line-height: 1.1;
}
.line-12 {
  line-height: 1.2;
}
.line-13 {
  line-height: 1.3;
}
.line-14 {
  line-height: 1.4;
}
.line-17 {
  line-height: 1.7;
}

// flex
.d-flex {
  display: flex;
}
.d-block {
  display: block;
}
.d-none {
  display: none;
}
.d-inline-block {
  display: inline-block;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
}
.flex-auto {
  flex: auto;
}
.flex-100 {
  flex: 0 0 100%;
}
$flex-gap: 6, 8, 10, 12, 16, 20;
@each $i in $flex-gap {
  .gap-#{$i} {
    gap: #{$i}px;
  }
}

.align-items {
  &-start {
    align-items: flex-start;
  }

  &-center {
    align-items: center;
  }

  &-end {
    align-items: flex-end;
  }
}
.justify-content {
  &-center {
    justify-content: center;
  }

  &-around {
    justify-content: space-around;
  }

  &-between {
    justify-content: space-between;
  }
}

.w-100 {
  width: 100%;
}
.w-auto {
  width: auto;
}