/* ==========================================================================
   #WIDTHS
   ========================================================================== */

/**
 * Appuniversum generates a series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <img src="" alt="" class="au-u-1-2" />
 *
 * These classes are most commonly used in conjunction with our layout system,
 * e.g.:
 *
 *   <div class="au-o-grid__item  au-u-1-2">
 *
 * By default, Appuniversum will also generate responsive variants of each of these
 * classes by using your Sass MQ configuration, e.g.:
 *
 *   <div class="au-o-grid__item  au-u-1-1  u-1-2@medium  u-1-3@large">
 *
 * Optionally, Appuniversum can generate offset classes which can push and pull
 * elements left and right by a specified amount, e.g.:
 *
 *   <div class="au-o-grid__item  au-u-2-3  au-u-pull-1-3">
 *
 * This is useful for making very granular changes to the rendered order of
 * items in a layout.
 *
 * N.B. This option is turned off by default.
 */

/* Variables
  ========================================================================== */

// Which fractions would you like in your grid system(s)? By default, Appuniversum
// provides you fractions of one whole, halves, thirds, quarters and fifths,
// e.g.:
//
//   .au-u-1-2
//   .au-u-2-5
//   .au-u-3-4
//   .au-u-2-3

$au-fractions: 1 2 3 4 5 !default;

// Optionally, Appuniversum can generate classes to offset items by a certain width.
// Would you like to generate these types of class as well? E.g.:
//
//   .au-u-push-1-3
//   .au-u-pull-2-4
//   .au-u-pull-1-5
//   .au-u-push-2-3

$au-offsets: false !default;

// By default, Appuniversum uses fractions-like classes like `<div class="u-1/4">`.
// You can change the `/` to whatever you fancy with this variable.
$au-widths-delimiter: "-" !default;

// When using Sass-MQ, this defines the separator for the breakpoints suffix
// in the class name. By default, we are generating the responsive suffixes
// for the classes with a `@` symbol so you get classes like:
// <div class="au-u-3-12@small">
$au-widths-breakpoint-separator: \@ !default;

/* Generate utility classes
  ========================================================================== */

// A mixin to spit out our width classes. Pass in the columns we want the widths
// to have, and an optional suffix for responsive widths. E.g. to create thirds
// and quarters for a small breakpoint:
//
// @include widths(3 4, -sm);

@mixin au-widths($columns, $breakpoint: null) {
  // Loop through the number of columns for each denominator of our fractions.
  @each $denominator in $columns {
    // Begin creating a numerator for our fraction up until we hit the
    // denominator.
    @for $numerator from 1 through $denominator {
      // Build a class in the format `.u-3/4[@<breakpoint>]`.
      .au-u-#{$numerator}#{$au-widths-delimiter}#{$denominator}#{$breakpoint} {
        width: (calc($numerator / $denominator)) * 100% !important;
      }

      @if ($au-offsets == true) {
        /**
         * 1. Reset any leftover or conflicting `left`/`right` values.
         */

        // Build a class in the format `.u-push-1/2[@<breakpoint>]`.
        .au-u-push-#{$numerator}#{$au-widths-delimiter}#{$denominator}#{$breakpoint} {
          position: relative !important;
          right: auto !important; /* [1] */
          left: (calc($numerator / $denominator)) * 100% !important;
        }

        // Build a class in the format `.u-pull-5/6[@<breakpoint>]`.
        .au-u-pull-#{$numerator}#{$au-widths-delimiter}#{$denominator}#{$breakpoint} {
          position: relative !important;
          right: (calc($numerator / $denominator)) * 100% !important;
          left: auto !important; /* [1] */
        }
      }
    }
  }

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

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

/* Generate utility classes
  ========================================================================== */

/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes take a fraction-like format (e.g. `.au-u-2-3`). Use these in
 * your markup:
 *
 * <div class="au-u-7-12">
 *
 * The following will generate widths helper classes based on the fractions
 * defined in the `$au-fractions` list.
 */

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

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="au-u-3-12@small">
 */

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