// @use'../variables' as*;

//Variable values in rem
$sizes: (
  1: 0.063, 2: 0.125, 3: 0.188,
  4: 0.25, 5: 0.313, 6: 0.375, 7: 0.438, 
  8: 0.5, 9: 0.563, 10: 0.625, 
  12: 0.75, 
  16: 1, 18: 1.125, 
  20: 1.25, 22: 1.375, 
  24: 1.5, 25: 1.563, 26: 1.625, 
  28: 1.75, 30: 1.875, 
  32: 2, 
  36: 2.25, 
  40: 2.5, 45: 2.813, 
  48: 3, 50: 3.125, 55: 3.438, 
  56: 3.5, 
  60: 3.75,
  64: 4, 65: 4.063, 70: 4.375, 75: 4.688, 
  80: 5, 85: 5.313, 90: 5.625, 95: 5.938, 
  100: 6.25, 110: 6.875, 120: 7.5, 130: 8.125, 140: 8.75, 150: 9.375, 170: 10.625, 200: 12.5, 250: 15.625, 300: 18.75
);

// Width
@each $key, $value in $sizes {
  .fui-w-#{$key} {
    width: $value+rem;
  }
}


// Height
@each $key, $value in $sizes {
  .fui-h-#{$key} {
    height: $value+rem;
  }
}


// Size (width & height)
@each $key, $value in $sizes {
  .fui-size-#{$key} {
    min-width: $value+rem;
    width: $value+rem;
    height: $value+rem;
  }
}


$width-sizes: (10: 10%, 25: 25%, 50: 50%, 75: 75%);

@media (min-width:1400px){
  @each $key, $value in $width-sizes {
    .fui-width-xxl-#{$key}{
      width: $value !important;
    }
  }
}


@media (min-width:1200px){
  @each $key, $value in $width-sizes {
    .fui-width-xl-#{$key}{
      width: $value !important;
    }
  }
}


@media (min-width:992px){
  @each $key, $value in $width-sizes {
    .fui-width-lg-#{$key}{
      width: $value !important;
    }
  }
}


@media (min-width:768px){
  @each $key, $value in $width-sizes {
    .fui-width-md-#{$key}{
      width: $value !important;
    }
  }
}


@media (min-width:575px){
  @each $key, $value in $width-sizes {
    .fui-width-sm-#{$key}{
      width: $value !important;
    }
  }
}