// @page Design/Icons
// @name Icons
// @partial icons
//
// @description
//   Our icons are displayed via `xlink:href` in the `<use>` tags. This allows us to directly embed SVGs in a flexible manner and be able to apply transformations and any sort of colours onto them.
//   We use an SVG sprite called `icons.svg` that is versioned just like ustyle. As per the examples, the icons are referenced via the ID, like this: `icons.svg#icon-bookmark`
//
//   **Accessibility**: In most cases, icons are purely presentational elements. In this scenario, you want to add: `aria-hidden="true"` and `role="presentation"` to your code.
//
//   #### Usage
//   * Suffixing with `--{size}` where size is one of *small*, *medium* or *large* will change the size of the icon from 16px, 32px and 64px respectively.
//   * `.us-icon--{size}--sm-tablet` and `.us-icon--{size}--mobile` will override icon sizes for those screen size
//   * `.us-icon--notext` allows you to set any element with no content to an icon
//   * blue, typegrey, inputgrey, typecyan and custom are colors that can be set on the icon with `.us-icon--{color}`
//   * Colors can be changed by adding your own `fill:` style to the SVG.
//   * [svg4everybody.js](https://github.com/jonathantneal/svg4everybody) is needed for Internet Explorer browsers
//
// @state alarm
// @state android
// @state arrow-circle
// @state arrow-up
// @state arrow-down
// @state book
// @state bookmark
// @state breadcrumb
// @state calculator
// @state calendar
// @state car
// @state checkbox-tick
// @state chevron-right
// @state clock
// @state close
// @state cog
// @state credit-card
// @state cross
// @state dual-fuel
// @state electric-light
// @state envelope
// @state exit-noexit
// @state facebook
// @state facebook-brand
// @state filter
// @state fixed-variable
// @state gas
// @state gauge
// @state github
// @state google
// @state google-brand
// @state graph-up
// @state home
// @state hot
// @state info
// @state kettle
// @state key
// @state lock
// @state magnify-in
// @state magnify
// @state menu
// @state message
// @state mobile
// @state monthly-dd
// @state network
// @state no-exit
// @state pdf
// @state pencil
// @state person-add
// @state person
// @state phone
// @state piggy-bank
// @state pin
// @state pound-note
// @state present
// @state print
// @state quarterly-dd
// @state question-circle
// @state quote
// @state recycle
// @state remove
// @state renewable
// @state results
// @state save
// @state share
// @state sim
// @state smiley
// @state sort
// @state speech-circle
// @state speech
// @state spinner
// @state star-half
// @state star
// @state starline-half
// @state starline
// @state talk
// @state tick-circle
// @state tick
// @state tv
// @state twitter
// @state twitter-brand
// @state uswitch
// @state variable
// @state warning-circle
// @state wifi
// @state wiki
// @state xml
// @state play
// @state pound-circle
// @state dashcam
// @state warning
// @state chevron-left
// @state controller
//
// @markup
//  <svg role="image" class="us-icon--medium us-icon--custom us-icon--{$modifiers}">
//    <use xlink:href="/images/icons.svg#icon-{$modifiers}"></use>
//  </svg>

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

/// Returns a background position for the number of `$icon-colors`
///
/// @group icons
/// @author David Annez
///

// scss-lint:disable QualifyingElement

svg.us-icon--before,
svg.us-icon--after {
  display: inline-block;
  vertical-align: middle;
}

svg.us-icon--before {
  margin-right: $gutter-width/4;
}

svg.us-icon--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
//

/// @require {Variable} icon-colors--svg
///
/// @require {Variable} icon-colors--svg--custom

@each $icon-color in $icon-colors--svg {
  $color-name: nth($icon-color, 1);
  $color-hex: nth($icon-color, 2);

  svg.us-icon--#{$color-name} {
    fill: $color-hex;
  }
}

// SVG icon coloring for custom classes

@each $icon-colors-svg in $icon-colors--svg--custom {
  $icon-name: nth($icon-colors-svg, 1);
  $icon-fill: nth($icon-colors-svg, 2);

  svg.us-icon--#{$icon-name} {
    fill: $icon-fill;
  }
}

// SVG icon coloring

@each $icon-color in $icon-colors--svg {
  $color-name: nth($icon-color, 1);
  $color-hex: nth($icon-color, 2);

  svg.us-icon--hover--#{$color-name}:hover {
    fill: $color-hex;
  }
}

// scss-lint:enable QualifyingElement

//
// ICON SIZING
//

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

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

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

    .us-icon--#{$size-name}--sm-tablet {
      width: $width;
      height: $height;
    }
  }
}

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

    .us-icon--#{$size-name}--mobile {
      width: $width;
      height: $height;
    }
  }
}