// Sizing
// @source - https://v4-alpha.getbootstrap.com/utilities/sizing/
// ----------------------------------

// %#{$abbrev}-#{$size}
@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in $sizes {
   %#{$abbrev}-#{$size} {
      #{$prop}: $length;
    }
  }
}

// Container widths
// %maxw-#{$prop} %minw-#{$prop}
@each $prop, $value in $container-widths {
  %c-maxw-#{$prop} {
    max-width: $value;
  };
  %c-minw-#{$prop} {
    min-width: $value;
  };
}

// Screen breakpoints
// %minw-#{$prop} %maxw-#{$prop}
@each $prop, $value in $screen-breakpoints {
  %b-maxw-#{$prop} {
    max-width: $value;
  };
  %b-minw-#{$prop} {
    min-width: $value;
  };
}

// %maxw-#{$prop} %minw-#{$prop}
@for $i from 1 through 10 {
  %maxw-#{$i * 10} {
    max-width: percentage($i / 10);
  }
  %minw-#{$i * 10} {
    max-width: percentage($i / 10);
  }
}

// Some special sizes
%mh-100 {
  max-height: 100%;
}

%wh-100 {
  width: 100%;
  height: 100%;
}

%w-auto {
  width: auto;
}

%h-auto {
  height: auto;
}
