// Add class="icon <ICON-NAME>" to your element. Will cause it to display
// inline-block, and sets the background size to `contain`
//
// .icon          - default class, height 1em, width 0.8 em
// .icon--large   - 60x60px
// .icon--small   - 40x40px
//
// Styleguide Icons using SASS.

.icon {
  display: inline-block;
  height: 1em;
  width: 0.8em;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.icon--large {
  width: 60px;
  height: 60px;
}

.icon--small {
  width: 40px;
  height: 40px;
}

// Generate classes to be used to add color to inline SVG icons
@each $icon-color in $icon-colors {
  .icon--#{nth($icon-color, 1)} {
    fill: nth($icon-color, 2);
  }
}

// Ensure we can override `fill` attribute colors using the above classes.
// Qualifying the selector with `svg` to minimize impact on other <svg> els.
// scss-lint:disable QualifyingElement
svg.icon:not(.icon--full-color) {
  circle,
  ellipse,
  g,
  line,
  path,
  polygon,
  polyline,
  rect {
    fill: inherit;
  }
}
// scss-lint:enable QualifyingElement

$global-icons: (
  arrow-left,
  arrow-right,
  (close, 'white'),
  close
);

@include generate-icon-classes($global-icons);