// @page Design/Icons
// @name Icons
// @partial icons
//
// @description
//   Icons are created by chaining classes together with `us-icon`. There are 3 sizes, 16px, 32px, 64px, these are named `us-icon--small`, `us-icon--medium` and `us-icon--large` respectively.
//
//   There are 5 colours for each icon, *white*, *typegrey*, *inputgrey*, *typecyan* and *custom*. Where *custom* can differ depending on what the icon represents (for logos, the custom tends to be the brand colour of that company). If you want an icon to be part of a **:pseudo** element (:before, :after) then suffix your icon name with `--before` and `--after` respectively. To have an icon standalone with text as fallback, add `us-icon--notext` to the element.
//
// @state us-icon--alarm
// @state us-icon--android
// @state us-icon--angry
// @state us-icon--apple
// @state us-icon--arrow-circle
// @state us-icon--arrow-up-left
// @state us-icon--arrow-up
// @state us-icon--arrow-down
// @state us-icon--barchart
// @state us-icon--blackberry
// @state us-icon--book
// @state us-icon--bookmark
// @state us-icon--breadcrumb
// @state us-icon--calculator
// @state us-icon--calendar
// @state us-icon--car
// @state us-icon--checkbox-tick
// @state us-icon--chevron-right
// @state us-icon--clock
// @state us-icon--close
// @state us-icon--cog
// @state us-icon--credit-card
// @state us-icon--cross
// @state us-icon--desktop
// @state us-icon--doc
// @state us-icon--dual-fuel
// @state us-icon--electric-light
// @state us-icon--envelope
// @state us-icon--exit-noexit
// @state us-icon--facebook
// @state us-icon--facebook-brand
// @state us-icon--filter
// @state us-icon--fixed-variable
// @state us-icon--gas
// @state us-icon--gauge
// @state us-icon--github
// @state us-icon--google
// @state us-icon--google-brand
// @state us-icon--graph-up
// @state us-icon--happy
// @state us-icon--home
// @state us-icon--hot
// @state us-icon--info
// @state us-icon--kettle
// @state us-icon--key
// @state us-icon--laptop
// @state us-icon--lock
// @state us-icon--magnify-in
// @state us-icon--magnify-out
// @state us-icon--magnify
// @state us-icon--menu
// @state us-icon--message
// @state us-icon--mobile
// @state us-icon--monthly-dd
// @state us-icon--network
// @state us-icon--neutral
// @state us-icon--no-exit
// @state us-icon--pdf
// @state us-icon--pencil
// @state us-icon--person-add
// @state us-icon--person
// @state us-icon--phone
// @state us-icon--piggy-bank
// @state us-icon--pin
// @state us-icon--pound-note
// @state us-icon--power
// @state us-icon--present
// @state us-icon--print
// @state us-icon--quarterly-dd
// @state us-icon--question-circle
// @state us-icon--question
// @state us-icon--quote
// @state us-icon--recycle
// @state us-icon--remove
// @state us-icon--renewable
// @state us-icon--results
// @state us-icon--sad
// @state us-icon--save
// @state us-icon--share
// @state us-icon--sim
// @state us-icon--smiley
// @state us-icon--sort
// @state us-icon--speech-circle
// @state us-icon--speech
// @state us-icon--spinner
// @state us-icon--star-half
// @state us-icon--star
// @state us-icon--starline-half
// @state us-icon--starline
// @state us-icon--tablet
// @state us-icon--talk
// @state us-icon--tick-circle
// @state us-icon--tick
// @state us-icon--tv
// @state us-icon--twitter
// @state us-icon--twitter-brand
// @state us-icon--uswitch
// @state us-icon--variable
// @state us-icon--warning-circle
// @state us-icon--warning
// @state us-icon--wifi
// @state us-icon--wiki
// @state us-icon--windows
// @state us-icon--wondering
// @state us-icon--world
// @state us-icon--xml
// @state us-icon--play
// @state us-icon--controller
// @state us-icon--pound-circle
//
// @markup
//  <div class="us-icon us-icon--medium us-icon--custom us-icon--hover-typecyan {$modifiers}"></div>

@import "ustyle/basics/variables/icons";

/// Returns a background position for the number of `$icon-colors`
///
/// @group icons
/// @author David Annez
///
/// @require {Variable} icon-colors
///
/// @param {String} $color
///   The matching colour string from the list of colours
///
/// @param {Bool} $parent [false]
///   If set to true, you can use this on a parent element and any icon within the parent
///   will have this icon colour. Especially useful for hover on buttons or larger elements.

@mixin icon-color($color, $parent: false) {
  $position: 0 (index($icon-colors, $color) - 1) * 25%;

  @if $parent {
    [class^="us-icon--"],
    [class*=" us-icon--"] {
      background-position: $position;
    }
  } @else {
    background-position: $position;
  }
}

@if $load-icons {
  [class^="us-icon--"],
  [class*=" us-icon--"] {
    background-repeat: no-repeat;
    background-size: cover;
  }

  [class^="us-icon--before"]:before,
  [class*=" us-icon--before"]:before,
  [class^="us-icon--after"]:after,
  [class*=" us-icon--after"]:after {
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    background-size: cover;
    content: " ";
  }

  [class^="us-icon--before"]:before,
  [class*=" us-icon--before"]:before {
    margin-right: $gutter-width/4;
  }

  [class^="us-icon--after"]:after,
  [class*=" us-icon--after"]:after {
    margin-left: $gutter-width/4;
  }

  .us-icon--centered {
    position: relative;
    top: 50%;
    margin: 0 auto;
    transform: translateY(-50%);
  }

  .us-icon--notext {
    display: inline-block;
    text-indent: -999em;
  }

  //
  // ICON COLOURS
  //

  @each $color in $icon-colors {
    .us-icon--#{$color},
    .us-icon--#{$color}--after:after,
    .us-icon--#{$color}--before:before {
      @include icon-color($color);
    }

    .us-icon--hover-#{$color}:hover,
    .us-icon--hover-#{$color}--after:hover:after,
    .us-icon--hover-#{$color}--before:hover:before {
      @include icon-color($color);
    }
  }

  //
  // ICON SIZING
  //

  @each $size in $icon-sizes {
    $size-name: nth($size, 1);
    $width: nth($size, 2);
    $height: nth($size, 3);

    .us-icon--#{$size-name},
    .us-icon--#{$size-name}--after:after,
    .us-icon--#{$size-name}--before:before {
      width: $width;
      height: $height;
    }

    @include respond-to(to-small-tablet) {
      .us-icon--#{$size-name}--sm-tablet,
      .us-icon--#{$size-name}--after--sm-tablet:after,
      .us-icon--#{$size-name}--before--sm-tablet:before {
        width: $width !important;
        height: $height !important;
      }
    }

    @include respond-to(mobile) {
      .us-icon--#{$size-name}--mobile,
      .us-icon--#{$size-name}--after--mobile:after,
      .us-icon--#{$size-name}--before--mobile:before {
        width: $width !important;
        height: $height !important;
      }
    }
  }
}