@use "sass:map";
@use "../variables";
@use "../mixins/breakpoints";

// stylelint-disable declaration-no-important

// Width and height

@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in variables.$sizes {
    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
  }
}

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

// Viewport additional helpers

.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }

.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }

// Width Auto Utils
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
  @include breakpoints.media-breakpoint-up($breakpoint) {
    $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
    .w#{$infix}-auto { width: auto !important; }
  }
}

// Min-width EM utils
@each $breakpoint in map.keys(variables.$grid-breakpoints) {
  @include breakpoints.media-breakpoint-up($breakpoint) {
    $infix: breakpoints.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
    // Add min-width (in rem) utilities, especially useful for buttons
    @for $i from 4 through 7 {
      .min-width#{$infix}-#{$i} { min-width: $i * 1em !important; }
    }
  }
}