/*
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;
*/
$data-empty-name: "data_empty";
$data-empty-x: 0px;
$data-empty-y: 0px;
$data-empty-offset-x: 0px;
$data-empty-offset-y: 0px;
$data-empty-width: 15px;
$data-empty-height: 15px;
$data-empty-total-width: 30px;
$data-empty-total-height: 30px;
$data-empty-image: "sprite-history-states.png";
$data-empty: (0px, 0px, 0px, 0px, 15px, 15px, 30px, 30px, "sprite-history-states.png", "data_empty");
$data-error-name: "data_error";
$data-error-x: 15px;
$data-error-y: 0px;
$data-error-offset-x: -15px;
$data-error-offset-y: 0px;
$data-error-width: 15px;
$data-error-height: 15px;
$data-error-total-width: 30px;
$data-error-total-height: 30px;
$data-error-image: "sprite-history-states.png";
$data-error: (15px, 0px, -15px, 0px, 15px, 15px, 30px, 30px, "sprite-history-states.png", "data_error");
$data-ok-name: "data_ok";
$data-ok-x: 0px;
$data-ok-y: 15px;
$data-ok-offset-x: 0px;
$data-ok-offset-y: -15px;
$data-ok-width: 15px;
$data-ok-height: 15px;
$data-ok-total-width: 30px;
$data-ok-total-height: 30px;
$data-ok-image: "sprite-history-states.png";
$data-ok: (0px, 15px, 0px, -15px, 15px, 15px, 30px, 30px, "sprite-history-states.png", "data_ok");
$data-queued-name: "data_queued";
$data-queued-x: 15px;
$data-queued-y: 15px;
$data-queued-offset-x: -15px;
$data-queued-offset-y: -15px;
$data-queued-width: 15px;
$data-queued-height: 15px;
$data-queued-total-width: 30px;
$data-queued-total-height: 30px;
$data-queued-image: "sprite-history-states.png";
$data-queued: (15px, 15px, -15px, -15px, 15px, 15px, 30px, 30px, "sprite-history-states.png", "data_queued");
$spritesheet-width: 30px;
$spritesheet-height: 30px;
$spritesheet-image: "sprite-history-states.png";
$spritesheet-sprites: ($data-empty, $data-error, $data-ok, $data-queued);
$spritesheet: (30px, 30px, "sprite-history-states.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);
}
*/
@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);
        }
    }
}