// SCSS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home {
// width: $icon-home-width;
// }
//
// The large array-like variables contain all information about a single icon
// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
//
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites;
$advantage-1-name: 'advantage-1';
$advantage-1-x: 332px;
$advantage-1-y: 89px;
$advantage-1-offset-x: -332px;
$advantage-1-offset-y: -89px;
$advantage-1-width: 89px;
$advantage-1-height: 88px;
$advantage-1-total-width: 556px;
$advantage-1-total-height: 472px;
$advantage-1-image: '../images/sprite.png';
$advantage-1: (332px, 89px, -332px, -89px, 89px, 88px, 556px, 472px, '../images/sprite.png', 'advantage-1', );
$advantage-10-name: 'advantage-10';
$advantage-10-x: 332px;
$advantage-10-y: 0px;
$advantage-10-offset-x: -332px;
$advantage-10-offset-y: 0px;
$advantage-10-width: 89px;
$advantage-10-height: 89px;
$advantage-10-total-width: 556px;
$advantage-10-total-height: 472px;
$advantage-10-image: '../images/sprite.png';
$advantage-10: (332px, 0px, -332px, 0px, 89px, 89px, 556px, 472px, '../images/sprite.png', 'advantage-10', );
$advantage-2-name: 'advantage-2';
$advantage-2-x: 332px;
$advantage-2-y: 177px;
$advantage-2-offset-x: -332px;
$advantage-2-offset-y: -177px;
$advantage-2-width: 88px;
$advantage-2-height: 88px;
$advantage-2-total-width: 556px;
$advantage-2-total-height: 472px;
$advantage-2-image: '../images/sprite.png';
$advantage-2: (332px, 177px, -332px, -177px, 88px, 88px, 556px, 472px, '../images/sprite.png', 'advantage-2', );
$advantage-3-name: 'advantage-3';
$advantage-3-x: 421px;
$advantage-3-y: 0px;
$advantage-3-offset-x: -421px;
$advantage-3-offset-y: 0px;
$advantage-3-width: 88px;
$advantage-3-height: 88px;
$advantage-3-total-width: 556px;
$advantage-3-total-height: 472px;
$advantage-3-image: '../images/sprite.png';
$advantage-3: (421px, 0px, -421px, 0px, 88px, 88px, 556px, 472px, '../images/sprite.png', 'advantage-3', );
$advantage-4-name: 'advantage-4';
$advantage-4-x: 0px;
$advantage-4-y: 310px;
$advantage-4-offset-x: 0px;
$advantage-4-offset-y: -310px;
$advantage-4-width: 101px;
$advantage-4-height: 77px;
$advantage-4-total-width: 556px;
$advantage-4-total-height: 472px;
$advantage-4-image: '../images/sprite.png';
$advantage-4: (0px, 310px, 0px, -310px, 101px, 77px, 556px, 472px, '../images/sprite.png', 'advantage-4', );
$advantage-5-name: 'advantage-5';
$advantage-5-x: 421px;
$advantage-5-y: 88px;
$advantage-5-offset-x: -421px;
$advantage-5-offset-y: -88px;
$advantage-5-width: 87px;
$advantage-5-height: 87px;
$advantage-5-total-width: 556px;
$advantage-5-total-height: 472px;
$advantage-5-image: '../images/sprite.png';
$advantage-5: (421px, 88px, -421px, -88px, 87px, 87px, 556px, 472px, '../images/sprite.png', 'advantage-5', );
$advantage-6-name: 'advantage-6';
$advantage-6-x: 0px;
$advantage-6-y: 387px;
$advantage-6-offset-x: 0px;
$advantage-6-offset-y: -387px;
$advantage-6-width: 85px;
$advantage-6-height: 85px;
$advantage-6-total-width: 556px;
$advantage-6-total-height: 472px;
$advantage-6-image: '../images/sprite.png';
$advantage-6: (0px, 387px, 0px, -387px, 85px, 85px, 556px, 472px, '../images/sprite.png', 'advantage-6', );
$advantage-7-name: 'advantage-7';
$advantage-7-x: 421px;
$advantage-7-y: 175px;
$advantage-7-offset-x: -421px;
$advantage-7-offset-y: -175px;
$advantage-7-width: 87px;
$advantage-7-height: 87px;
$advantage-7-total-width: 556px;
$advantage-7-total-height: 472px;
$advantage-7-image: '../images/sprite.png';
$advantage-7: (421px, 175px, -421px, -175px, 87px, 87px, 556px, 472px, '../images/sprite.png', 'advantage-7', );
$advantage-8-name: 'advantage-8';
$advantage-8-x: 85px;
$advantage-8-y: 387px;
$advantage-8-offset-x: -85px;
$advantage-8-offset-y: -387px;
$advantage-8-width: 71px;
$advantage-8-height: 81px;
$advantage-8-total-width: 556px;
$advantage-8-total-height: 472px;
$advantage-8-image: '../images/sprite.png';
$advantage-8: (85px, 387px, -85px, -387px, 71px, 81px, 556px, 472px, '../images/sprite.png', 'advantage-8', );
$advantage-9-name: 'advantage-9';
$advantage-9-x: 421px;
$advantage-9-y: 262px;
$advantage-9-offset-x: -421px;
$advantage-9-offset-y: -262px;
$advantage-9-width: 87px;
$advantage-9-height: 87px;
$advantage-9-total-width: 556px;
$advantage-9-total-height: 472px;
$advantage-9-image: '../images/sprite.png';
$advantage-9: (421px, 262px, -421px, -262px, 87px, 87px, 556px, 472px, '../images/sprite.png', 'advantage-9', );
$hero-icon-1-name: 'hero-icon-1';
$hero-icon-1-x: 247px;
$hero-icon-1-y: 310px;
$hero-icon-1-offset-x: -247px;
$hero-icon-1-offset-y: -310px;
$hero-icon-1-width: 70px;
$hero-icon-1-height: 57px;
$hero-icon-1-total-width: 556px;
$hero-icon-1-total-height: 472px;
$hero-icon-1-image: '../images/sprite.png';
$hero-icon-1: (247px, 310px, -247px, -310px, 70px, 57px, 556px, 472px, '../images/sprite.png', 'hero-icon-1', );
$hero-icon-10-name: 'hero-icon-10';
$hero-icon-10-x: 156px;
$hero-icon-10-y: 387px;
$hero-icon-10-offset-x: -156px;
$hero-icon-10-offset-y: -387px;
$hero-icon-10-width: 68px;
$hero-icon-10-height: 69px;
$hero-icon-10-total-width: 556px;
$hero-icon-10-total-height: 472px;
$hero-icon-10-image: '../images/sprite.png';
$hero-icon-10: (156px, 387px, -156px, -387px, 68px, 69px, 556px, 472px, '../images/sprite.png', 'hero-icon-10', );
$hero-icon-2-name: 'hero-icon-2';
$hero-icon-2-x: 0px;
$hero-icon-2-y: 183px;
$hero-icon-2-offset-x: 0px;
$hero-icon-2-offset-y: -183px;
$hero-icon-2-width: 184px;
$hero-icon-2-height: 127px;
$hero-icon-2-total-width: 556px;
$hero-icon-2-total-height: 472px;
$hero-icon-2-image: '../images/sprite.png';
$hero-icon-2: (0px, 183px, 0px, -183px, 184px, 127px, 556px, 472px, '../images/sprite.png', 'hero-icon-2', );
$hero-icon-3-name: 'hero-icon-3';
$hero-icon-3-x: 184px;
$hero-icon-3-y: 183px;
$hero-icon-3-offset-x: -184px;
$hero-icon-3-offset-y: -183px;
$hero-icon-3-width: 141px;
$hero-icon-3-height: 83px;
$hero-icon-3-total-width: 556px;
$hero-icon-3-total-height: 472px;
$hero-icon-3-image: '../images/sprite.png';
$hero-icon-3: (184px, 183px, -184px, -183px, 141px, 83px, 556px, 472px, '../images/sprite.png', 'hero-icon-3', );
$hero-icon-4-name: 'hero-icon-4';
$hero-icon-4-x: 101px;
$hero-icon-4-y: 310px;
$hero-icon-4-offset-x: -101px;
$hero-icon-4-offset-y: -310px;
$hero-icon-4-width: 73px;
$hero-icon-4-height: 65px;
$hero-icon-4-total-width: 556px;
$hero-icon-4-total-height: 472px;
$hero-icon-4-image: '../images/sprite.png';
$hero-icon-4: (101px, 310px, -101px, -310px, 73px, 65px, 556px, 472px, '../images/sprite.png', 'hero-icon-4', );
$hero-icon-5-name: 'hero-icon-5';
$hero-icon-5-x: 317px;
$hero-icon-5-y: 310px;
$hero-icon-5-offset-x: -317px;
$hero-icon-5-offset-y: -310px;
$hero-icon-5-width: 59px;
$hero-icon-5-height: 46px;
$hero-icon-5-total-width: 556px;
$hero-icon-5-total-height: 472px;
$hero-icon-5-image: '../images/sprite.png';
$hero-icon-5: (317px, 310px, -317px, -310px, 59px, 46px, 556px, 472px, '../images/sprite.png', 'hero-icon-5', );
$hero-icon-6-name: 'hero-icon-6';
$hero-icon-6-x: 332px;
$hero-icon-6-y: 265px;	
$hero-icon-6-offset-x: -332px;
$hero-icon-6-offset-y: -265px;
$hero-icon-6-width: 65px;
$hero-icon-6-height: 42px;
$hero-icon-6-total-width: 556px;
$hero-icon-6-total-height: 472px;
$hero-icon-6-image: '../images/sprite.png';
$hero-icon-6: (332px, 265px, -332px, -265px, 65px, 42px, 556px, 472px, '../images/sprite.png', 'hero-icon-6', );
$hero-icon-7-name: 'hero-icon-7';
$hero-icon-7-x: 0px;
$hero-icon-7-y: 0px;
$hero-icon-7-offset-x: 0px;
$hero-icon-7-offset-y: 0px;
$hero-icon-7-width: 332px;
$hero-icon-7-height: 183px;
$hero-icon-7-total-width: 556px;
$hero-icon-7-total-height: 472px;
$hero-icon-7-image: '../images/sprite.png';
$hero-icon-7: (0px, 0px, 0px, 0px, 332px, 183px, 556px, 472px, '../images/sprite.png', 'hero-icon-7', );
$hero-icon-8-name: 'hero-icon-8';
$hero-icon-8-x: 174px;
$hero-icon-8-y: 310px;
$hero-icon-8-offset-x: -174px;
$hero-icon-8-offset-y: -310px;
$hero-icon-8-width: 73px;
$hero-icon-8-height: 65px;
$hero-icon-8-total-width: 556px;
$hero-icon-8-total-height: 472px;
$hero-icon-8-image: '../images/sprite.png';
$hero-icon-8: (174px, 310px, -174px, -310px, 73px, 65px, 556px, 472px, '../images/sprite.png', 'hero-icon-8', );
$hero-icon-9-name: 'hero-icon-9';
$hero-icon-9-x: 224px;
$hero-icon-9-y: 387px;
$hero-icon-9-offset-x: -224px;
$hero-icon-9-offset-y: -387px;
$hero-icon-9-width: 59px;
$hero-icon-9-height: 46px;
$hero-icon-9-total-width: 556px;
$hero-icon-9-total-height: 472px;
$hero-icon-9-image: '../images/sprite.png';
$hero-icon-9: (224px, 387px, -224px, -387px, 59px, 46px, 556px, 472px, '../images/sprite.png', 'hero-icon-9', );
$pdf-icon-name: 'pdf-icon';
$pdf-icon-x: 509px;
$pdf-icon-y: 47px;
$pdf-icon-offset-x: -509px;
$pdf-icon-offset-y: -47px;
$pdf-icon-width: 17px;
$pdf-icon-height: 22px;
$pdf-icon-total-width: 556px;
$pdf-icon-total-height: 472px;
$pdf-icon-image: '../images/sprite.png';
$pdf-icon: (509px, 47px, -509px, -47px, 17px, 22px, 556px, 472px, '../images/sprite.png', 'pdf-icon', );
$price-icon-name: 'price-icon';
$price-icon-x: 509px;
$price-icon-y: 0px;
$price-icon-offset-x: -509px;
$price-icon-offset-y: 0px;
$price-icon-width: 47px;
$price-icon-height: 47px;
$price-icon-total-width: 556px;
$price-icon-total-height: 472px;
$price-icon-image: '../images/sprite.png';
$price-icon: (509px, 0px, -509px, 0px, 47px, 47px, 556px, 472px, '../images/sprite.png', 'price-icon', );
$xls-icon-name: 'xls-icon';
$xls-icon-x: 526px;
$xls-icon-y: 47px;
$xls-icon-offset-x: -526px;
$xls-icon-offset-y: -47px;
$xls-icon-width: 17px;
$xls-icon-height: 22px;
$xls-icon-total-width: 556px;
$xls-icon-total-height: 472px;
$xls-icon-image: '../images/sprite.png';
$xls-icon: (526px, 47px, -526px, -47px, 17px, 22px, 556px, 472px, '../images/sprite.png', 'xls-icon', );
$spritesheet-width: 556px;
$spritesheet-height: 472px;
$spritesheet-image: '../images/sprite.png';
$spritesheet-sprites: ($advantage-1, $advantage-10, $advantage-2, $advantage-3, $advantage-4, $advantage-5, $advantage-6, $advantage-7, $advantage-8, $advantage-9, $hero-icon-1, $hero-icon-10, $hero-icon-2, $hero-icon-3, $hero-icon-4, $hero-icon-5, $hero-icon-6, $hero-icon-7, $hero-icon-8, $hero-icon-9, $pdf-icon, $price-icon, $xls-icon, );
$spritesheet: (556px, 472px, '../images/sprite.png', $spritesheet-sprites, );

// The provided mixins are intended to be used with the array-like variables
//
// .icon-home {
//   @include sprite-width($icon-home);
// }
//
// .icon-email {
//   @include sprite($icon-email);
// }
//
// Example usage in HTML:
//
// `display: block` sprite:
// <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
//
// // CSS
// .icon {
//   display: inline-block;
// }
//
// // HTML
// <i class="icon icon-home"></i>
@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

// The `sprites` mixin generates identical output to the CSS template
//   but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}