@use "../../variables/index" as *;

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin square($size) {
  @include size($size, $size);
}

/* build utilities class
  * $prop - property, i.e. margin, padding
  * $prefix - for class name, i.e. m, p
  * $basesize - unit for increasing sizes, defauts to 8
  * $range - amount of classes built
*/

@mixin createSizeClasses($value, $prop, $prefix, $basesize: 8) {

  @if $value >= 0 {
  $val: ($value * $basesize);
  .#{$prefix}-t-#{$val} {
    #{$prop}-top: ($val * 1px)!important;
  }
  .#{$prefix}-r-#{$val} {
    #{$prop}-right: ($val * 1px)!important;
  }
  .#{$prefix}-b-#{$val} {
    #{$prop}-bottom: ($val * 1px)!important;
  }
  .#{$prefix}-l-#{$val} {
    #{$prop}-left: ($val * 1px)!important;
  }
  .#{$prefix}-#{$val} {
    #{$prop}: ($val * 1px)!important;
  }
  
  @media (max-width: $screen-xs-max) {
    .#{$prefix}-t-xs-#{$val} {
      #{$prop}-top: ($val * 1px)!important;
    }
    .#{$prefix}-r-xs-#{$val} {
      #{$prop}-right: ($val * 1px)!important;
    }
    .#{$prefix}-b-xs-#{$val} {
      #{$prop}-bottom: ($val * 1px)!important;
    }
    .#{$prefix}-l-xs-#{$val} {
      #{$prop}-left: ($val * 1px)!important;
    }
    .#{$prefix}-xs-#{$val} {
      #{$prop}: ($val * 1px)!important;
    }
  }
  @media (min-width: $screen-sm-min) {
    .#{$prefix}-t-sm-#{$val} {
      #{$prop}-top: ($val * 1px)!important;
    }
    .#{$prefix}-r-sm-#{$val} {
      #{$prop}-right: ($val * 1px)!important;
    }
    .#{$prefix}-b-sm-#{$val} {
      #{$prop}-bottom: ($val * 1px)!important;
    }
    .#{$prefix}-l-sm-#{$val} {
      #{$prop}-left: ($val * 1px)!important;
    }
    .#{$prefix}-sm-#{$val} {
      #{$prop}: ($val * 1px)!important;
    }
  }
  @media (min-width: $screen-md-min) {
    .#{$prefix}-t-md-#{$val} {
      #{$prop}-top: ($val * 1px)!important;
    }
    .#{$prefix}-r-md-#{$val} {
      #{$prop}-right: ($val * 1px)!important;
    }
    .#{$prefix}-b-md-#{$val} {
      #{$prop}-bottom: ($val * 1px)!important;
    }
    .#{$prefix}-l-md-#{$val} {
      #{$prop}-left: ($val * 1px)!important;
    }
    .#{$prefix}-md-#{$val} {
      #{$prop}: ($val * 1px)!important;
    }
  }
  @media (min-width: $screen-lg-min) {
    .#{$prefix}-t-lg-#{$val} {
      #{$prop}-top: ($val * 1px)!important;
    }
    .#{$prefix}-r-lg-#{$val} {
      #{$prop}-right: ($val * 1px)!important;
    }
    .#{$prefix}-b-lg-#{$val} {
      #{$prop}-bottom: ($val * 1px)!important;
    }
    .#{$prefix}-l-lg-#{$val} {
      #{$prop}-left: ($val * 1px)!important;
    }
    .#{$prefix}-lg-#{$val} {
      #{$prop}: ($val * 1px)!important;
    }
  }
  @include createSizeClasses(($value - 1),$prop,$prefix,$basesize);
}
  }