@use "rem-vars" as *;

// MIN WIDTH in PERCENTAGE
.min-w- {
  @for $i from 0 through 100 {
    $class: if($i < 10, "0#{$i}", "#{$i}");
    $percent: if($i < 10, "0#{$i}%", "#{$i}%");

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

  &fill {
    min-width: -webkit-fill-available;
  }
}
// MIN WIDTH in PERCENTAGE
.max-w- {
  @for $i from 0 through 100 {
    $class: if($i < 10, "0#{$i}", "#{$i}");
    $percent: if($i < 10, "0#{$i}%", "#{$i}%");

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

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

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

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

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

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

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

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

/* MIN WIDTH VW */
.min-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} {
      min-width: #{$percent};
    }
  }
}

/* MAX WIDTH VW */
.max-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} {
      max-width: #{$percent};
    }
  }
}

// MIN HEIGHT IN VW UNIT
.min-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} {
      min-height: #{$percent};
    }
  }
}

// MAX HEIGHT IN VW UNIT
.max-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} {
      max-height: #{$percent};
    }
  }
}

/* MIN WIDTH VH */
.min-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} {
      min-width: #{$percent};
    }
  }
}

/* MAX WIDTH VH */
.max-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} {
      max-width: #{$percent};
    }
  }
}

// MIN HEIGHT VH
.min-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} {
      min-height: #{$percent};
    }
  }
}

// MAX HEIGHT VH
.max-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} {
      max-height: #{$percent};
    }
  }
}

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

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

.max-widthNone,
.max-w-none,
.max-width-none,
.max-w-0 {
  max-width: 0;
}
// HEIGHT 0
.min-heightNone,
.min-h-none,
.min-height-none,
.min-h-0 {
  min-height: 0;
}

.max-heightNone,
.max-h-none,
.max-height-none,
.max-h-0 {
  max-height: 0;
}

// REM MIN MAX

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

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

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

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

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

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

// IMPORTANT CLASS

// MIN WIDTH in PERCENTAGE IMPORTANT
.min-w- {
  @for $i from 0 through 100 {
    $class: if($i < 10, "0#{$i}i", "#{$i}i");
    $percent: if($i < 10, "0#{$i}% !important", "#{$i}% !important");

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

  &fill {
    min-width: -webkit-fill-available !important;
  }
}
// MIN WIDTH in PERCENTAGE IMPORTANT
.max-w- {
  @for $i from 0 through 100 {
    $class: if($i < 10, "0#{$i}i", "#{$i}i");
    $percent: if($i < 10, "0#{$i}% !important", "#{$i}% !important");

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

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

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

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

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

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

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

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

// WIDTH IN REM !IMPORTANT
.min-w-- {
  @for $i from 0 through 10 {
    @for $j from 0 through 9 {
      $class: #{$i}#{$j}i;
      $rem: $i + calc($j / 10);

      &#{$class} {
        min-width: #{$rem}rem !important;
      }
    }
  }
}
.max-w-- {
  @for $i from 0 through 10 {
    @for $j from 0 through 9 {
      $class: #{$i}#{$j}i;
      $rem: $i + calc($j / 10);

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


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

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

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

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







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

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

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

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

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

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

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

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