// stylelint-disable declaration-no-important

// Width and height

@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in $sizes {
    .#{$abbrev}-#{$size} {
      #{$prop}: $length !important;
    }
  }
}
.min-w-0 {
  min-width: 0;
}
.max-w-0 {
  max-width: 0;
}
.max-w-300 {
  max-width: $grid-unit-y * 38;
}
.min-w-150 {
  min-width: $grid-unit-x * 19;
}
.min-w-224 {
  min-width: $grid-unit-x * 28;
}
.min-w-300 {
  min-width: $grid-unit-x * 38;
}
.mw-100 {
  max-width: 100% !important;
}
.mh-100 {
  max-height: 100% !important;
}
.w-100px {
  width: ceil($grid-unit-x * 12.5);
}
.mh-200 {
  max-height: $grid-unit-y * 25;
  overflow-y: auto;

  @include styled-scroll-vert();
}
.mh-400 {
  max-height: $grid-unit-y * 50;
  overflow-y: auto;

  @include styled-scroll-vert();
}

.min-h-400 {
  min-height: $grid-unit-y * 50;
}

// 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;
}