// 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;
$clock-name: 'clock';
$clock-x: 76px;
$clock-y: 288px;
$clock-offset-x: -76px;
$clock-offset-y: -288px;
$clock-width: 18px;
$clock-height: 18px;
$clock-total-width: 352px;
$clock-total-height: 311px;
$clock-image: '../sprites/sprites.png';
$clock: (76px, 288px, -76px, -288px, 18px, 18px, 352px, 311px, '../sprites/sprites.png', 'clock', );
$crown-n-name: 'crown-n';
$crown-n-x: 0px;
$crown-n-y: 288px;
$crown-n-offset-x: 0px;
$crown-n-offset-y: -288px;
$crown-n-width: 30px;
$crown-n-height: 23px;
$crown-n-total-width: 352px;
$crown-n-total-height: 311px;
$crown-n-image: '../sprites/sprites.png';
$crown-n: (0px, 288px, 0px, -288px, 30px, 23px, 352px, 311px, '../sprites/sprites.png', 'crown-n', );
$crown-name: 'crown';
$crown-x: 38px;
$crown-y: 288px;
$crown-offset-x: -38px;
$crown-offset-y: -288px;
$crown-width: 30px;
$crown-height: 23px;
$crown-total-width: 352px;
$crown-total-height: 311px;
$crown-image: '../sprites/sprites.png';
$crown: (38px, 288px, -38px, -288px, 30px, 23px, 352px, 311px, '../sprites/sprites.png', 'crown', );
$num1-name: 'num1';
$num1-x: 72px;
$num1-y: 72px;
$num1-offset-x: -72px;
$num1-offset-y: -72px;
$num1-width: 64px;
$num1-height: 64px;
$num1-total-width: 352px;
$num1-total-height: 311px;
$num1-image: '../sprites/sprites.png';
$num1: (72px, 72px, -72px, -72px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num1', );
$num10-name: 'num10';
$num10-x: 144px;
$num10-y: 0px;
$num10-offset-x: -144px;
$num10-offset-y: 0px;
$num10-width: 64px;
$num10-height: 64px;
$num10-total-width: 352px;
$num10-total-height: 311px;
$num10-image: '../sprites/sprites.png';
$num10: (144px, 0px, -144px, 0px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num10', );
$num11-name: 'num11';
$num11-x: 144px;
$num11-y: 72px;
$num11-offset-x: -144px;
$num11-offset-y: -72px;
$num11-width: 64px;
$num11-height: 64px;
$num11-total-width: 352px;
$num11-total-height: 311px;
$num11-image: '../sprites/sprites.png';
$num11: (144px, 72px, -144px, -72px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num11', );
$num12-name: 'num12';
$num12-x: 0px;
$num12-y: 144px;
$num12-offset-x: 0px;
$num12-offset-y: -144px;
$num12-width: 64px;
$num12-height: 64px;
$num12-total-width: 352px;
$num12-total-height: 311px;
$num12-image: '../sprites/sprites.png';
$num12: (0px, 144px, 0px, -144px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num12', );
$num13-name: 'num13';
$num13-x: 72px;
$num13-y: 144px;
$num13-offset-x: -72px;
$num13-offset-y: -144px;
$num13-width: 64px;
$num13-height: 64px;
$num13-total-width: 352px;
$num13-total-height: 311px;
$num13-image: '../sprites/sprites.png';
$num13: (72px, 144px, -72px, -144px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num13', );
$num14-name: 'num14';
$num14-x: 144px;
$num14-y: 144px;
$num14-offset-x: -144px;
$num14-offset-y: -144px;
$num14-width: 64px;
$num14-height: 64px;
$num14-total-width: 352px;
$num14-total-height: 311px;
$num14-image: '../sprites/sprites.png';
$num14: (144px, 144px, -144px, -144px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num14', );
$num15-name: 'num15';
$num15-x: 216px;
$num15-y: 0px;
$num15-offset-x: -216px;
$num15-offset-y: 0px;
$num15-width: 64px;
$num15-height: 64px;
$num15-total-width: 352px;
$num15-total-height: 311px;
$num15-image: '../sprites/sprites.png';
$num15: (216px, 0px, -216px, 0px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num15', );
$num16-name: 'num16';
$num16-x: 216px;
$num16-y: 72px;
$num16-offset-x: -216px;
$num16-offset-y: -72px;
$num16-width: 64px;
$num16-height: 64px;
$num16-total-width: 352px;
$num16-total-height: 311px;
$num16-image: '../sprites/sprites.png';
$num16: (216px, 72px, -216px, -72px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num16', );
$num17-name: 'num17';
$num17-x: 0px;
$num17-y: 0px;
$num17-offset-x: 0px;
$num17-offset-y: 0px;
$num17-width: 64px;
$num17-height: 64px;
$num17-total-width: 352px;
$num17-total-height: 311px;
$num17-image: '../sprites/sprites.png';
$num17: (0px, 0px, 0px, 0px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num17', );
$num18-name: 'num18';
$num18-x: 0px;
$num18-y: 216px;
$num18-offset-x: 0px;
$num18-offset-y: -216px;
$num18-width: 64px;
$num18-height: 64px;
$num18-total-width: 352px;
$num18-total-height: 311px;
$num18-image: '../sprites/sprites.png';
$num18: (0px, 216px, 0px, -216px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num18', );
$num19-name: 'num19';
$num19-x: 72px;
$num19-y: 216px;
$num19-offset-x: -72px;
$num19-offset-y: -216px;
$num19-width: 64px;
$num19-height: 64px;
$num19-total-width: 352px;
$num19-total-height: 311px;
$num19-image: '../sprites/sprites.png';
$num19: (72px, 216px, -72px, -216px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num19', );
$num2-name: 'num2';
$num2-x: 144px;
$num2-y: 216px;
$num2-offset-x: -144px;
$num2-offset-y: -216px;
$num2-width: 64px;
$num2-height: 64px;
$num2-total-width: 352px;
$num2-total-height: 311px;
$num2-image: '../sprites/sprites.png';
$num2: (144px, 216px, -144px, -216px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num2', );
$num20-name: 'num20';
$num20-x: 216px;
$num20-y: 216px;
$num20-offset-x: -216px;
$num20-offset-y: -216px;
$num20-width: 64px;
$num20-height: 64px;
$num20-total-width: 352px;
$num20-total-height: 311px;
$num20-image: '../sprites/sprites.png';
$num20: (216px, 216px, -216px, -216px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num20', );
$num3-name: 'num3';
$num3-x: 288px;
$num3-y: 0px;
$num3-offset-x: -288px;
$num3-offset-y: 0px;
$num3-width: 64px;
$num3-height: 64px;
$num3-total-width: 352px;
$num3-total-height: 311px;
$num3-image: '../sprites/sprites.png';
$num3: (288px, 0px, -288px, 0px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num3', );
$num4-name: 'num4';
$num4-x: 288px;
$num4-y: 72px;
$num4-offset-x: -288px;
$num4-offset-y: -72px;
$num4-width: 64px;
$num4-height: 64px;
$num4-total-width: 352px;
$num4-total-height: 311px;
$num4-image: '../sprites/sprites.png';
$num4: (288px, 72px, -288px, -72px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num4', );
$num5-name: 'num5';
$num5-x: 288px;
$num5-y: 144px;
$num5-offset-x: -288px;
$num5-offset-y: -144px;
$num5-width: 64px;
$num5-height: 64px;
$num5-total-width: 352px;
$num5-total-height: 311px;
$num5-image: '../sprites/sprites.png';
$num5: (288px, 144px, -288px, -144px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num5', );
$num6-name: 'num6';
$num6-x: 288px;
$num6-y: 216px;
$num6-offset-x: -288px;
$num6-offset-y: -216px;
$num6-width: 64px;
$num6-height: 64px;
$num6-total-width: 352px;
$num6-total-height: 311px;
$num6-image: '../sprites/sprites.png';
$num6: (288px, 216px, -288px, -216px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num6', );
$num7-name: 'num7';
$num7-x: 216px;
$num7-y: 144px;
$num7-offset-x: -216px;
$num7-offset-y: -144px;
$num7-width: 64px;
$num7-height: 64px;
$num7-total-width: 352px;
$num7-total-height: 311px;
$num7-image: '../sprites/sprites.png';
$num7: (216px, 144px, -216px, -144px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num7', );
$num8-name: 'num8';
$num8-x: 0px;
$num8-y: 72px;
$num8-offset-x: 0px;
$num8-offset-y: -72px;
$num8-width: 64px;
$num8-height: 64px;
$num8-total-width: 352px;
$num8-total-height: 311px;
$num8-image: '../sprites/sprites.png';
$num8: (0px, 72px, 0px, -72px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num8', );
$num9-name: 'num9';
$num9-x: 72px;
$num9-y: 0px;
$num9-offset-x: -72px;
$num9-offset-y: 0px;
$num9-width: 64px;
$num9-height: 64px;
$num9-total-width: 352px;
$num9-total-height: 311px;
$num9-image: '../sprites/sprites.png';
$num9: (72px, 0px, -72px, 0px, 64px, 64px, 352px, 311px, '../sprites/sprites.png', 'num9', );
$spritesheet-width: 352px;
$spritesheet-height: 311px;
$spritesheet-image: '../sprites/sprites.png';
$spritesheet-sprites: ($clock, $crown-n, $crown, $num1, $num10, $num11, $num12, $num13, $num14, $num15, $num16, $num17, $num18, $num19, $num2, $num20, $num3, $num4, $num5, $num6, $num7, $num8, $num9, );
$spritesheet: (352px, 311px, '../sprites/sprites.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);
    }
  }
}