//Specify the proportional width of an object.
//Intentional redundancy build into each set of unit classes.
//Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
//1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11

.u-size1of12 {
  flex-basis: auto;
  width: calc(100% * 1 / 12);
}

.u-size1of10 {
  flex-basis: auto;
  width: 10%;
}

.u-size1of8 {
  flex-basis: auto;
  width: 12.5%;
}

.u-size1of6,
.u-size2of12 {
  flex-basis: auto;
  width: calc(100% * 1 / 6);
}

.u-size1of5,
.u-size2of10 {
  flex-basis: auto;
  width: 20%;
}

.u-size1of4,
.u-size2of8,
.u-size3of12 {
  flex-basis: auto;
  width: 25%;
}

.u-size3of10 {
  flex-basis: auto;
  width: 30%;
}

.u-size1of3,
.u-size2of6,
.u-size4of12 {
  flex-basis: auto;
  width: calc(100% * 1 / 3);
}

.u-size3of8 {
  flex-basis: auto;
  width: 37.5%;
}

.u-size2of5,
.u-size4of10 {
  flex-basis: auto;
  width: 40%;
}

.u-size5of12 {
  flex-basis: auto;
  width: calc(100% * 5 / 12);
}

.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12 {
  flex-basis: auto;
  width: 50%;
}

.u-size7of12 {
  flex-basis: auto;
  width: calc(100% * 7 / 12);
}

.u-size3of5,
.u-size6of10 {
  flex-basis: auto;
  width: 60%;
}

.u-size5of8 {
  flex-basis: auto;
  width: 62.5%;
}

.u-size2of3,
.u-size4of6,
.u-size8of12 {
  flex-basis: auto;
  width: calc(100% * 2 / 3);
}

.u-size7of10 {
  flex-basis: auto;
  width: 70%;
}

.u-size3of4,
.u-size6of8,
.u-size9of12 {
  flex-basis: auto;
  width: 75%;
}

.u-size4of5,
.u-size8of10 {
  flex-basis: auto;
  width: 80%;
}

.u-size5of6,
.u-size10of12 {
  flex-basis: auto;
  width: calc(100% * 5 / 6);
}

.u-size7of8 {
  flex-basis: auto;
  width: 87.5%;
}

.u-size9of10 {
  flex-basis: auto;
  width: 90%;
}

.u-size11of12 {
  flex-basis: auto;
  width: calc(100% * 11 / 12);
}

.u-sizeFit {
  flex-basis: auto;
}

.u-sizeFill {
  flex: 1 1 0%;
  flex-basis: 0%;
}

.u-sizeFillAlt {
  flex: 1 1 auto;
  flex-basis: auto;
}

.u-sizeFull {
  width: 100%;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @if $infix != '' {
      .#{$infix}\:u-size1of12 {
        flex-basis: auto;
        width: calc(100% * 1 / 12);
      }
      .#{$infix}\:u-size1of10 {
        flex-basis: auto;
        width: 10%;
      }

      .#{$infix}\:u-size1of8 {
        flex-basis: auto;
        width: 12.5%;
      }

      .#{$infix}\:u-size1of6,
      .#{$infix}\:u-size2of12 {
        flex-basis: auto;
        width: calc(100% * 1 / 6);
      }

      .#{$infix}\:u-size1of5,
      .#{$infix}\:u-size2of10 {
        flex-basis: auto;
        width: 20%;
      }

      .#{$infix}\:u-size1of4,
      .#{$infix}\:u-size2of8,
      .#{$infix}\:u-size3of12 {
        flex-basis: auto;
        width: 25%;
      }

      .#{$infix}\:u-size3of10 {
        flex-basis: auto;
        width: 30%;
      }

      .#{$infix}\:u-size1of3,
      .#{$infix}\:u-size2of6,
      .#{$infix}\:u-size4of12 {
        flex-basis: auto;
        width: calc(100% * 1 / 3);
      }

      .#{$infix}\:u-size3of8 {
        flex-basis: auto;
        width: 37.5%;
      }

      .#{$infix}\:u-size2of5,
      .#{$infix}\:u-size4of10 {
        flex-basis: auto;
        width: 40%;
      }

      .#{$infix}\:u-size5of12 {
        flex-basis: auto;
        width: calc(100% * 5 / 12);
      }

      .#{$infix}\:u-size1of2,
      .#{$infix}\:u-size2of4,
      .#{$infix}\:u-size3of6,
      .#{$infix}\:u-size4of8,
      .#{$infix}\:u-size5of10,
      .#{$infix}\:u-size6of12 {
        flex-basis: auto;
        width: 50%;
      }

      .#{$infix}\:u-size7of12 {
        flex-basis: auto;
        width: calc(100% * 7 / 12);
      }

      .#{$infix}\:u-size3of5,
      .#{$infix}\:u-size6of10 {
        flex-basis: auto;
        width: 60%;
      }

      .#{$infix}\:u-size5of8 {
        flex-basis: auto;
        width: 62.5%;
      }

      .#{$infix}\:u-size2of3,
      .#{$infix}\:u-size4of6,
      .#{$infix}\:u-size8of12 {
        flex-basis: auto;
        width: calc(100% * 2 / 3);
      }

      .#{$infix}\:u-size7of10 {
        flex-basis: auto;
        width: 70%;
      }

      .#{$infix}\:u-size3of4,
      .#{$infix}\:u-size6of8,
      .#{$infix}\:u-size9of12 {
        flex-basis: auto;
        width: 75%;
      }

      .#{$infix}\:u-size4of5,
      .#{$infix}\:u-size8of10 {
        flex-basis: auto;
        width: 80%;
      }

      .#{$infix}\:u-size5of6,
      .#{$infix}\:u-size10of12 {
        flex-basis: auto;
        width: calc(100% * 5 / 6);
      }

      .#{$infix}\:u-size7of8 {
        flex-basis: auto;
        width: 87.5%;
      }

      .#{$infix}\:u-size9of10 {
        flex-basis: auto;
        width: 90%;
      }

      .#{$infix}\:u-size11of12 {
        flex-basis: auto;
        width: calc(100% * 11 / 12);
      }

      .#{$infix}\:u-sizeFit {
        flex-basis: auto;
      }

      .#{$infix}\:u-sizeFill {
        flex: 1 1 0%;
        flex-basis: 0%;
      }

      .#{$infix}\:u-sizeFillAlt {
        flex: 1 1 auto;
        flex-basis: auto;
      }

      .#{$infix}\:u-sizeFull {
        width: 100%;
      }
    }
  }
}

// ==========================================================
// Width and Height:
// ==========================================================
.u-minWidthNone {
  min-width: 0; // for using with the .u-textTruncate (text overflow) by adding to the flex child element.
}

.u-minWidthFull {
  min-width: 100%;
}

.u-maxWidthFull {
  max-width: 100%;
}

.u-minHeightFull {
  min-height: 100%;
}

.u-maxHeightFull {
  max-height: 100%;
}

.u-screenHeightFull {
  min-height: 100vh;
}

.u-screenMaxHeightFull {
  max-height: 100vh;
}

.u-screenWidthFull {
  min-width: 100vw;
}

.u-screenMaxWidthFull {
  max-width: 100vw;
}

.u-heightMinContent {
  min-height: min-content;
}

.u-widthMinContent {
  min-width: min-content;
}

.u-heightMinFitContent {
  min-height: fit-content;
}

.u-heightMaxContent {
  max-height: min-content;
}

.u-widthMaxContent {
  max-width: min-content;
}

.u-heightMaxFitContent {
  max-height: fit-content;
}

// 1. Loop through the $breakpoints to get breakpoint's name,
// like: "sm" or "md" and then create classes like: ".sm:" or ".md:"
@each $breakpoint, $breakpointValue in $grid-breakpoints {
  $infix: "";

  @if $breakpoint != "xs" {
    $infix: $breakpoint + \:;
  }

  @include media-breakpoint-up($breakpoint) {
    //@media (min-width:#{$breakpointValue}) {
    // 2. Loop through the $spacers.
    @each $size, $length in $spacers {
      .#{$infix}u-width#{capitalize($size)} {
        width: $length;
      }
      .#{$infix}u-height#{capitalize($size)} {
        height: $length;
      }
    }

    .#{$infix}u-widthFull {
      width: 100%;
    }

    .#{$infix}u-heightFull {
      height: 100%;
    }

    .#{$infix}u-widthAuto {
      width: auto;
    }

    .#{$infix}u-heightAuto {
      height: auto;
    }
  }
}

@each $size, $length in $gap-width {
  .u-gap#{capitalize($size)} {
    gap: $length;
  }

  .u-gapColumn#{capitalize($size)} {
    column-gap: $length;
  }

  .u-gapRow#{capitalize($size)} {
    row-gap: $length;
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @if $infix != '' {
      @each $size, $length in $spacers {
        .#{$infix}\:u-gap#{capitalize($size)} {
          gap: $length;
        }

        .#{$infix}\:u-gapColumn#{capitalize($size)} {
          column-gap: $length;
        }

        .#{$infix}\:u-gapRow#{capitalize($size)} {
          row-gap: $length;
        }
      }
    }
  }
}