// Utilities :: Widths

// Settings
$fabric-fractions: 1 2 3 4 5 !default;
$fabric-offsets: true !default;
$fabric-widths-delimiter: \/ !default;
$fabric-widths-breakpoint-separator: \@ !default;

// Widths mixin
@mixin fabric-widths($columns, $breakpoint: null) {
  @each $denominator in $columns {
    @for $numerator from 1 through $denominator {
      .u-#{$numerator}#{$fabric-widths-delimiter}#{$denominator}#{$breakpoint} {
        width: ($numerator / $denominator) * 100% !important;
      }

      @if ($fabric-offsets == true) {
        .u-push-#{$numerator}#{$fabric-widths-delimiter}#{$denominator}#{$breakpoint} {
          position: relative !important;
          left: ($numerator / $denominator) * 100% !important;
          right: auto !important;
        }

        .u-pull-#{$numerator}#{$fabric-widths-delimiter}#{$denominator}#{$breakpoint} {
          position: relative !important;
          right: ($numerator / $denominator) * 100% !important;
          left: auto !important;
        }
      }
    }
  }

  @if ($fabric-offsets == true and $breakpoint != null) {
    .u-push-none#{$breakpoint} {
      left: auto !important;
    }

    .u-pull-none#{$breakpoint} {
      right: auto !important;
    }
  }
}

@include fabric-widths($fabric-fractions);

@if (variable-exists(mq-breakpoints)) {
  @each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {
    @include mq($from: $inuit-bp-name) {
      @include fabric-widths(
        $fabric-fractions,
        #{$fabric-widths-breakpoint-separator}#{$inuit-bp-name}
      );
    }
  }
}