// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import '../bootstrap-4.6.2/functions';

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import '../bootstrap-4.6.2/variables';
@import '../bootstrap-4.6.2/mixins';

// 4. Include any optional Bootstrap components as you like
@import '../bootstrap-4.6.2/reboot';
@import '../bootstrap-4.6.2/utilities';
@import '../bootstrap-4.6.2/grid';

// Custom spacing utilities for any number (0-999)
@for $i from 0 through 200 {
  // Margin
  .m-#{$i} {
    margin: #{$i}px !important;
  }
  .mt-#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr-#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml-#{$i} {
    margin-left: #{$i}px !important;
  }
  .mx-#{$i} {
    margin-left: #{$i}px !important;
    margin-right: #{$i}px !important;
  }
  .my-#{$i} {
    margin-top: #{$i}px !important;
    margin-bottom: #{$i}px !important;
  }

  // Padding
  .p-#{$i} {
    padding: #{$i}px !important;
  }
  .pt-#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr-#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl-#{$i} {
    padding-left: #{$i}px !important;
  }
  .px-#{$i} {
    padding-left: #{$i}px !important;
    padding-right: #{$i}px !important;
  }
  .py-#{$i} {
    padding-top: #{$i}px !important;
    padding-bottom: #{$i}px !important;
  }

  // Border radius
  .rounded-#{$i} {
    border-radius: #{$i}px !important;
  }

  // Width height
  .w-#{$i} {
    width: #{$i}px !important;
  }
  .h-#{$i} {
    height: #{$i}px !important;
  }

  // Font size
  .fs-#{$i} {
    font-size: #{$i}px !important;
  }
}

.w-full {
  width: 100% !important;
}

.h-full {
  height: 100% !important;
}

.font-weight-medium {
  font-weight: 500 !important;
}

// Custom grid
.row-md {
  @include make-row(16px);

  > * {
    @include make-col-ready(16px);
  }
}

.row-sm {
  @include make-row(8px);

  > * {
    @include make-col-ready(8px);
  }
}

.row-xs {
  @include make-row(4px);

  > * {
    @include make-col-ready(4px);
  }
}
