// UTILITIES
/* ==========================================================================
   #CLEARFIX
   ========================================================================== */

/**
 * Attach our clearfix mixin to a utility class.
 */

.u-clearfix {
  @include inuit-clearfix();
}


$inuit-offsets: true;
/* ==========================================================================
   #WIDTHS
   ========================================================================== */

/**
 * inuitcss generates a series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <img src="" alt="" class="u-1/2" />
 *
 * These classes are most commonly used in conjunction with our layout system,
 * e.g.:
 *
 *   <div class="o-layout__item  u-1/2">
 *
 * By default, inuitcss will also generate responsive variants of each of these
 * classes by using your Sass MQ configuration, e.g.:
 *
 *   <div class="o-layout__item  u-1/1  u-1/2@tablet  u-1/3@desktop">
 *
 * Optionally, inuitcss can generate offset classes which can push and pull
 * elements left and right by a specified amount, e.g.:
 *
 *   <div class="o-layout__item  u-2/3  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.
 */





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

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





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

$inuit-offsets: false !default;





// By default, inuitcss uses fractions-like classes like `<div class="u-1/4">`.
// You can change the `/` to whatever you fancy with this variable.
$inuit-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="u-3/12@mobile">
$inuit-widths-breakpoint-separator: \@ !default;





// 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 inuit-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>]`.
      .u-#{$numerator}#{$inuit-widths-delimiter}#{$denominator}#{$breakpoint} {
        width: ($numerator / $denominator) * 100% !important;
      }

      @if ($inuit-offsets == true) {

        /**
        * 1. Reset any leftover or conflicting `left`/`right` values.
        */

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

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

      }

    }

  }

}




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

@include inuit-widths($inuit-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="u-3/12@mobile">
 */

@if (variable-exists(mq-breakpoints)) {

  @each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {

    @include mq($from: $inuit-bp-name) {
      @include inuit-widths($inuit-fractions, #{$inuit-widths-breakpoint-separator}#{$inuit-bp-name});
    }

  }

}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */

/**
 * Redefine all of our basic heading styles against utility classes so as to
 * allow for double stranded heading hierarchy, e.g. we semantically need an H2,
 * but we want it to be sized like an H1:
 *
 *   <h2 class="u-h1"></h2>
 *
 */

.u-h1 {
  @include inuit-font-size($inuit-font-size-h1, $important: true);
}

.u-h2 {
  @include inuit-font-size($inuit-font-size-h2, $important: true);
}

.u-h3 {
  @include inuit-font-size($inuit-font-size-h3, $important: true);
}

.u-h4 {
  @include inuit-font-size($inuit-font-size-h4, $important: true);
}

.u-h5 {
  @include inuit-font-size($inuit-font-size-h5, $important: true);
}

.u-h6 {
  @include inuit-font-size($inuit-font-size-h6, $important: true);
}

/* ==========================================================================
   #SPACING
   ========================================================================== */

/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding {}
 *   .u-padding-right-none {}
 *   .u-padding-horizontal {}
 *   .u-padding-vertical-small {}
 */

/* stylelint-disable string-quotes */

$inuit-spacing-directions: (
  null: null,
  '-top': '-top',
  '-right': '-right',
  '-bottom': '-bottom',
  '-left': '-left',
  '-horizontal': '-left' '-right',
  '-vertical': '-top' '-bottom',
) !default;

$inuit-spacing-properties: (
  'padding': 'padding',
  'margin': 'margin',
) !default;

$inuit-spacing-sizes: (
  null: $inuit-global-spacing-unit,
  '-tiny': $inuit-global-spacing-unit-tiny,
  '-small': $inuit-global-spacing-unit-small,
  '-large': $inuit-global-spacing-unit-large,
  '-huge': $inuit-global-spacing-unit-huge,
  '-none': 0
) !default;

@each $property-namespace, $property in $inuit-spacing-properties {

  @each $direction-namespace, $direction-rules in $inuit-spacing-directions {

    @each $size-namespace, $size in $inuit-spacing-sizes {

      .u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {

        @each $direction in $direction-rules {
          #{$property}#{$direction}: $size !important;
        }

      }

    }

  }

}

/* stylelint-enable string-quotes */

/* ==========================================================================
   #PRINT
   ========================================================================== */

/**
 * Very crude, reset-like styles taken from the HTML5 Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
 * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
 */

@media print {

  /**
   * 1. Black prints faster: http://www.sanbeiji.com/archives/953
   */

  *,
  *:before,
  *:after,
  *:first-letter,
  *:first-line {
    background: transparent !important;
    color: #000 !important; /* [1] */
    box-shadow: none !important;
    text-shadow: none !important;
  }


  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }


  /**
   * Don't show links that are fragment identifiers, or use the `javascript:`
   * pseudo protocol.
   */

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }


  /**
   * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
   */

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }


  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

}

/* ==========================================================================
   #HIDE
   ========================================================================== */

/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.u-hidden-visually {
  @include inuit-hidden-visually();
}


/**
 * Hide visually and from screen readers.
 */

.u-hidden {
  display: none !important;
}