// COLOR
:root {
  @mixin colors {
    @for $i from 1 through 19 {
      $tc: $i * 50;
      .tc-#{$tc} {
        color: var(--ion-color-step-#{$tc});
      }
      .bg-#{$tc} {
        background: var(--ion-color-step-#{$tc});
      }
    }
    .tc {
      color: var(--ion-text-color);
    }
  }
  @include colors;
}

// FONT
:root {
  @mixin font-size {
    @for $i from 0 through 90 {
      $fs: 10 + $i;
      .fs-#{$fs} {
        font-size: #{$fs}px !important;
      }
    }
  }
  @include font-size;

  @mixin font-weight {
    @for $i from 0 through 3 {
      $fw: 400 + $i * 100;
      .fw-#{$fw} {
        font-weight: #{$fw};
      }
    }
  }
  @include font-weight;
}

// MARGIN
:root {
  @mixin margin {
    @for $i from 0 through 300 {
      .m-#{$i} {
        margin: #{$i}px !important;
      }
      .mt-#{$i} {
        margin-top: #{$i}px !important;
      }
      .mt-n-#{$i} {
        margin-top: -#{$i}px !important;
      }
      .me-#{$i} {
        margin-right: #{$i}px !important;
      }
      .mb-#{$i} {
        margin-bottom: #{$i}px !important;
      }
      .mb-n-#{$i} {
        margin-bottom: -#{$i}px !important;
      }
      .ms-#{$i} {
        margin-left: #{$i}px !important;
      }
    }
  }
  @include margin;
}

// PADDING
:root {
  @mixin padding {
    @for $i from 0 through 300 {
      .pt-#{$i} {
        padding-top: #{$i}px !important;
      }
      .pe-#{$i} {
        padding-right: #{$i}px !important;
      }
      .pb-#{$i} {
        padding-bottom: #{$i}px !important;
      }
      .ps-#{$i} {
        padding-left: #{$i}px !important;
      }
    }
  }
  @include padding;
}

// BORDER-RADIUS
:root {
  @mixin border-radius {
    @for $i from 0 through 20 {
      .br-#{$i} {
        border-radius: #{$i}px !important;
      }
    }
  }
  @include border-radius;
}

// MULTILINE TEXT
:root {
  @mixin text-ml {
    @for $i from 1 through 5 {
      .text-ml-#{$i} {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: #{$i};
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
      }
    }
  }
  @include text-ml;
}

// LINE-HEIGHT
:root {
  @mixin line-height {
    @for $i from 10 through 20 {
      $lh: calc($i/10);
      .lh-#{$i} {
        line-height: #{$lh};
      }
    }
  }
  @include line-height;
}

// HEIGHT
:root {
  @mixin height {
    @for $i from 10 through 100 {
      .h-#{$i} {
        height: #{$i}px !important;
      }
      .mx-h-#{$i} {
        max-height: #{$i}px !important;
      }
    }
  }
  @include height;
}