@import "variables";

$display: (none, inline, inline-block, block, flex, inline-flex, table, table-cell, table-row);

// Display Utility
@mixin display($infix:'') {
  @if ($infix!='') {
    $infix: $infix+"-";
  }
  @each $dis in $display{
    .d-#{$infix}#{$dis}{
      display: $dis !important;
    }
  }
}

@include display();
@each $breakpointName, $breakpointSize in $breakpoints{
  @media only screen and (min-width: #{$breakpointSize}){
    @include display($breakpointName);
  }
}

.flex-1{
  flex: 1 !important;
}

//Size utility
@each $prop, $abbr in (width: w, height: h){
  @each $size in (25, 50, 75, 100){
    .#{$abbr}-#{$size}{
      #{$prop}: $size * 1%;
    }
  }
}