@use "rem-vars" as *;
/* ----------------------------------------------------------------
IMAGE (Unit-%) IN PERCENTAGE
----------------------------------------------------------------
*/

// SCSS code for width classes from 0% to 200%
.w- {
  @for $i from 0 through 200 {
    $class: if($i < 10, "0#{$i}", "#{$i}");
    $percent: if($i < 10, "0#{$i}%", "#{$i}%");

    &#{$class} {
      width: #{$percent};
    }
  }

  &fill {
    width: -webkit-fill-available;
  }
}

//HEIGHT IN PERCENTAGE
.h- {
  @for $i from 0 through 200 {
    $class: if($i < 10, "0#{$i}", "#{$i}");
    $percent: if($i < 10, "0#{$i}%", "#{$i}%");

    &#{$class} {
      height: #{$percent};
    }
  }

  &fill {
    height: -webkit-fill-available;
  }
}

/* Unit__VW */
.w-vw- {
  @for $i from 0 through 100 {
    $class: if($i < 10, "0#{$i}", "#{$i}");
    $percent: if($i < 10, "0#{$i}vw", "#{$i}vw");

    &#{$class} {
      width: #{$percent};
    }
  }
}

// HEIGHT IN VW UNIT
.h-vw- {
  @for $i from 0 through 100 {
    $class: if($i < 10, "0#{$i}", "#{$i}");
    $percent: if($i < 10, "0#{$i}vw", "#{$i}vw");

    &#{$class} {
      height: #{$percent};
    }
  }
}

/* WIDTH (Unit__VH) */
.w-vh- {
  @for $i from 0 through 100 {
    $class: if($i < 10, "0#{$i}", "#{$i}");
    $percent: if($i < 10, "0#{$i}vh", "#{$i}vh");

    &#{$class} {
      width: #{$percent};
    }
  }
}

// HEIGHT --> height VH
.h-vh- {
  @for $i from 0 through 100 {
    $class: if($i < 10, "0#{$i}", "#{$i}");
    $percent: if($i < 10, "0#{$i}vh", "#{$i}vh");

    &#{$class} {
      height: #{$percent};
    }
  }
}

/* ----------------------------------------------------------------
WIDTH IN REM SIZE
----------------------------------------------------------------
*/

.widthNone,
.w-none,
.width-none,
.w-0 {
  width: 0;
}

.w-- {
  @for $i from 0 through 30 {
    @for $j from 0 through 9 {
      $class: #{$i}#{$j};
      $rem: $i + calc($j / 10);

      &#{$class} {
        width: #{$rem}rem;
      }
    }
  }
}

/* ----------------------------------------------------------------
HEIGHT IN REM SIZE
----------------------------------------------------------------
*/
.h-- {
  @for $i from 0 through 30 {
    @for $j from 0 through 9 {
      $class: #{$i}#{$j};
      $rem: $i + calc($j / 10);

      &#{$class} {
        height: #{$rem}rem;
      }
    }
  }
}

//HEIGHT WIDTH AUTO CLASSES
.h-auto {
  height: auto;
}

.w-auto {
  width: auto;
}

//MORE CLASSES FOR HEIGHT AND WIDHTH
.w-max {
  width: max-content;
}

.w-min {
  width: min-content;
}

.w-fit {
  width: fit-content;
}

.h-max {
  height: max-content;
}

.h-min {
  height: min-content;
}

.h-fit {
  height: fit-content;
}
.h-i,
.h-inherit {
  height: inherit;
}
.w-i,
.w-inherit {
  width: inherit;
}
.h-max-i {
  max-height: inherit;
}

.h-min-i {
  min-height: inherit;
}

.w-max-i {
  max-width: inherit;
}

.w-min-i {
  min-width: inherit;
}

// IMPORTANT CLASSES
.w- {
  @for $i from 0 through 300 {
    $class: if($i < 10, "0#{$i}i", "#{$i}i");
    $percent: if($i < 10, "0#{$i} !important", "#{$i} !important");

    &#{$class} {
      width: #{$percent};
    }
  }

  &fill {
    width: -webkit-fill-available !important;
  }
}

//HEIGHT IN PERCENTAGE
.h- {
  @for $i from 0 through 300 {
    $class: if($i < 10, "0#{$i}i", "#{$i}i");
    $percent: if($i < 10, "0#{$i} !important", "#{$i} !important");

    &#{$class} {
      height: #{$percent};
    }
  }

  &fill {
    height: -webkit-fill-available !important;
  }
}

// REM IMPORTANT

.w-- {
  @for $i from 0 through 30 {
    @for $j from 0 through 9 {
      $class: #{$i}#{$j}i;
      $rem: $i + calc($j / 10);

      &#{$class} {
        width: #{$rem}rem !important;
      }
    }
  }
}

.h-- {
  @for $i from 0 through 30 {
    @for $j from 0 through 9 {
      $class: #{$i}#{$j}i;
      $rem: $i + calc($j / 10);

      &#{$class} {
        height: #{$rem}rem !important;
      }
    }
  }
}