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

@each $key in ("none", "auto") {
  .width--#{$key} {
    width: $key !important;
  }

  .height--#{$key} {
    height: $key !important;
  }

  .min-width--#{$key} {
    min-width: $key !important;
  }

  .min-height--#{$key} {
    min-height: $key !important;
  }

  .max-width--#{$key} {
    max-width: $key !important;
  }

  .max-height--#{$key} {
    max-height: $key !important;
  }
}

@each $breakpoint in map.keys($breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    .width-#{$infix}-auto {
      width: auto !important;
    }

    .height-#{$infix}-auto {
      height: auto !important;
    }

    .min-width-#{$infix}-auto {
      min-width: auto !important;
    }

    .min-height-#{$infix}-auto {
      min-height: auto !important;
    }

    .min-width-#{$infix}-none {
      min-width: none !important;
    }

    .min-height-#{$infix}-none {
      min-height: none !important;
    }

    .max-width-#{$infix}-none {
      max-width: none !important;
    }

    .max-height-#{$infix}-none {
      max-height: none !important;
    }

    @each $value in $sizes {
      .width-#{$infix}-#{$value} {
        width: #{$value}#{"%"} !important;
      }

      .height-#{$infix}-#{$value} {
        height: #{$value}#{"%"} !important;
      }

      .max-width-#{$infix}-#{$value} {
        max-width: #{$value}#{"%"} !important;
      }

      .max-height-#{$infix}-#{$value} {
        max-height: #{$value}#{"%"} !important;
      }

      .min-width-#{$infix}-#{$value} {
        min-width: #{$value}#{"%"} !important;
      }

      .min-height-#{$infix}-#{$value} {
        min-height: #{$value}#{"%"} !important;
      }

      .width-#{$infix}-#{$value}-viewport {
        width: #{$value}vw !important;
      }

      .height-#{$infix}-#{$value}-viewport {
        height: #{$value}vh !important;
      }

      .max-width-#{$infix}-#{$value}-viewport {
        max-width: #{$value}vw !important;
      }

      .max-height-#{$infix}-#{$value}-viewport {
        max-height: #{$value}vh !important;
      }

      .min-width-#{$infix}-#{$value}-viewport {
        min-width: #{$value}vw !important;
      }

      .min-height-#{$infix}-#{$value}-viewport {
        min-height: #{$value}vh !important;
      }
    }
  }
}