/*
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;
*/
$arrow-breadcrumbs-name: 'arrow-breadcrumbs';
$arrow-breadcrumbs-x: 96px;
$arrow-breadcrumbs-y: 61px;
$arrow-breadcrumbs-offset-x: -96px;
$arrow-breadcrumbs-offset-y: -61px;
$arrow-breadcrumbs-width: 6px;
$arrow-breadcrumbs-height: 9px;
$arrow-breadcrumbs-total-width: 104px;
$arrow-breadcrumbs-total-height: 92px;
$arrow-breadcrumbs-image: 'sprites/arrows.png';
$arrow-breadcrumbs: (96px, 61px, -96px, -61px, 6px, 9px, 104px, 92px, 'sprites/arrows.png', 'arrow-breadcrumbs', );
$arrow-content-carousel-previous-name: 'arrow-content-carousel-previous';
$arrow-content-carousel-previous-x: 45px;
$arrow-content-carousel-previous-y: 0px;
$arrow-content-carousel-previous-offset-x: -45px;
$arrow-content-carousel-previous-offset-y: 0px;
$arrow-content-carousel-previous-width: 45px;
$arrow-content-carousel-previous-height: 45px;
$arrow-content-carousel-previous-total-width: 104px;
$arrow-content-carousel-previous-total-height: 92px;
$arrow-content-carousel-previous-image: 'sprites/arrows.png';
$arrow-content-carousel-previous: (45px, 0px, -45px, 0px, 45px, 45px, 104px, 92px, 'sprites/arrows.png', 'arrow-content-carousel-previous', );
$arrow-green-down-name: 'arrow-green-down';
$arrow-green-down-x: 36px;
$arrow-green-down-y: 45px;
$arrow-green-down-offset-x: -36px;
$arrow-green-down-offset-y: -45px;
$arrow-green-down-width: 10px;
$arrow-green-down-height: 5px;
$arrow-green-down-total-width: 104px;
$arrow-green-down-total-height: 92px;
$arrow-green-down-image: 'sprites/arrows.png';
$arrow-green-down: (36px, 45px, -36px, -45px, 10px, 5px, 104px, 92px, 'sprites/arrows.png', 'arrow-green-down', );
$arrow-content-carousel-next-name: 'arrow-content-carousel-next';
$arrow-content-carousel-next-x: 0px;
$arrow-content-carousel-next-y: 0px;
$arrow-content-carousel-next-offset-x: 0px;
$arrow-content-carousel-next-offset-y: 0px;
$arrow-content-carousel-next-width: 45px;
$arrow-content-carousel-next-height: 45px;
$arrow-content-carousel-next-total-width: 104px;
$arrow-content-carousel-next-total-height: 92px;
$arrow-content-carousel-next-image: 'sprites/arrows.png';
$arrow-content-carousel-next: (0px, 0px, 0px, 0px, 45px, 45px, 104px, 92px, 'sprites/arrows.png', 'arrow-content-carousel-next', );
$arrow-green-up-name: 'arrow-green-up';
$arrow-green-up-x: 26px;
$arrow-green-up-y: 45px;
$arrow-green-up-offset-x: -26px;
$arrow-green-up-offset-y: -45px;
$arrow-green-up-width: 10px;
$arrow-green-up-height: 5px;
$arrow-green-up-total-width: 104px;
$arrow-green-up-total-height: 92px;
$arrow-green-up-image: 'sprites/arrows.png';
$arrow-green-up: (26px, 45px, -26px, -45px, 10px, 5px, 104px, 92px, 'sprites/arrows.png', 'arrow-green-up', );
$arrow-grey-name: 'arrow-grey';
$arrow-grey-x: 0px;
$arrow-grey-y: 45px;
$arrow-grey-offset-x: 0px;
$arrow-grey-offset-y: -45px;
$arrow-grey-width: 26px;
$arrow-grey-height: 13px;
$arrow-grey-total-width: 104px;
$arrow-grey-total-height: 92px;
$arrow-grey-image: 'sprites/arrows.png';
$arrow-grey: (0px, 45px, 0px, -45px, 26px, 13px, 104px, 92px, 'sprites/arrows.png', 'arrow-grey', );
$arrow-orange-2-name: 'arrow-orange-2';
$arrow-orange-2-x: 90px;
$arrow-orange-2-y: 21px;
$arrow-orange-2-offset-x: -90px;
$arrow-orange-2-offset-y: -21px;
$arrow-orange-2-width: 14px;
$arrow-orange-2-height: 20px;
$arrow-orange-2-total-width: 104px;
$arrow-orange-2-total-height: 92px;
$arrow-orange-2-image: 'sprites/arrows.png';
$arrow-orange-2: (90px, 21px, -90px, -21px, 14px, 20px, 104px, 92px, 'sprites/arrows.png', 'arrow-orange-2', );
$arrow-orange-3-name: 'arrow-orange-3';
$arrow-orange-3-x: 90px;
$arrow-orange-3-y: 0px;
$arrow-orange-3-offset-x: -90px;
$arrow-orange-3-offset-y: 0px;
$arrow-orange-3-width: 14px;
$arrow-orange-3-height: 21px;
$arrow-orange-3-total-width: 104px;
$arrow-orange-3-total-height: 92px;
$arrow-orange-3-image: 'sprites/arrows.png';
$arrow-orange-3: (90px, 0px, -90px, 0px, 14px, 21px, 104px, 92px, 'sprites/arrows.png', 'arrow-orange-3', );
$arrow-orange-name: 'arrow-orange';
$arrow-orange-x: 26px;
$arrow-orange-y: 50px;
$arrow-orange-offset-x: -26px;
$arrow-orange-offset-y: -50px;
$arrow-orange-width: 5px;
$arrow-orange-height: 7px;
$arrow-orange-total-width: 104px;
$arrow-orange-total-height: 92px;
$arrow-orange-image: 'sprites/arrows.png';
$arrow-orange: (26px, 50px, -26px, -50px, 5px, 7px, 104px, 92px, 'sprites/arrows.png', 'arrow-orange', );
$arrow-white-name: 'arrow-white';
$arrow-white-x: 0px;
$arrow-white-y: 58px;
$arrow-white-offset-x: 0px;
$arrow-white-offset-y: -58px;
$arrow-white-width: 21px;
$arrow-white-height: 14px;
$arrow-white-total-width: 104px;
$arrow-white-total-height: 92px;
$arrow-white-image: 'sprites/arrows.png';
$arrow-white: (0px, 58px, 0px, -58px, 21px, 14px, 104px, 92px, 'sprites/arrows.png', 'arrow-white', );
$arrow-news-name: 'arrow_news';
$arrow-news-x: 90px;
$arrow-news-y: 41px;
$arrow-news-offset-x: -90px;
$arrow-news-offset-y: -41px;
$arrow-news-width: 14px;
$arrow-news-height: 20px;
$arrow-news-total-width: 104px;
$arrow-news-total-height: 92px;
$arrow-news-image: 'sprites/arrows.png';
$arrow-news: (90px, 41px, -90px, -41px, 14px, 20px, 104px, 92px, 'sprites/arrows.png', 'arrow_news', );
$arrow-news-filter-name: 'arrow_news_filter';
$arrow-news-filter-x: 90px;
$arrow-news-filter-y: 61px;
$arrow-news-filter-offset-x: -90px;
$arrow-news-filter-offset-y: -61px;
$arrow-news-filter-width: 6px;
$arrow-news-filter-height: 9px;
$arrow-news-filter-total-width: 104px;
$arrow-news-filter-total-height: 92px;
$arrow-news-filter-image: 'sprites/arrows.png';
$arrow-news-filter: (90px, 61px, -90px, -61px, 6px, 9px, 104px, 92px, 'sprites/arrows.png', 'arrow_news_filter', );
$arrow-news-hover-name: 'arrow_news_hover';
$arrow-news-hover-x: 0px;
$arrow-news-hover-y: 72px;
$arrow-news-hover-offset-x: 0px;
$arrow-news-hover-offset-y: -72px;
$arrow-news-hover-width: 14px;
$arrow-news-hover-height: 20px;
$arrow-news-hover-total-width: 104px;
$arrow-news-hover-total-height: 92px;
$arrow-news-hover-image: 'sprites/arrows.png';
$arrow-news-hover: (0px, 72px, 0px, -72px, 14px, 20px, 104px, 92px, 'sprites/arrows.png', 'arrow_news_hover', );
$spritesheet-width: 104px;
$spritesheet-height: 92px;
$spritesheet-image: 'sprites/arrows.png';
$spritesheet-sprites: ($arrow-breadcrumbs, $arrow-content-carousel-previous, $arrow-green-down, $arrow-content-carousel-next, $arrow-green-up, $arrow-grey, $arrow-orange-2, $arrow-orange-3, $arrow-orange, $arrow-white, $arrow-news, $arrow-news-filter, $arrow-news-hover, );
$spritesheet: (104px, 92px, 'sprites/arrows.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: 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);
    }
  }
}
/*
Icon classes can be used entirely standalone. They are named after their original file names.

```html
<!-- `display: block` sprite -->
<div class="icon-home"></div>

<!-- `display: inline-block` sprite -->
<img class="icon-home" />
```
*/
.icon-arrow-breadcrumbs {
  background-image: image-url('sprites/arrows.png');
  background-position: -96px -61px;
  width: 6px;
  height: 9px;
}
.icon-arrow-content-carousel-previous {
  background-image: image-url('sprites/arrows.png');
  background-position: -45px 0px;
  width: 45px;
  height: 45px;
}
.icon-arrow-green-down {
  background-image: image-url('sprites/arrows.png');
  background-position: -36px -45px;
  width: 10px;
  height: 5px;
}
.icon-arrow-content-carousel-next {
  background-image: image-url('sprites/arrows.png');
  background-position: 0px 0px;
  width: 45px;
  height: 45px;
}
.icon-arrow-green-up {
  background-image: image-url('sprites/arrows.png');
  background-position: -26px -45px;
  width: 10px;
  height: 5px;
}
.icon-arrow-grey {
  background-image: image-url('sprites/arrows.png');
  background-position: 0px -45px;
  width: 26px;
  height: 13px;
}
.icon-arrow-orange-2 {
  background-image: image-url('sprites/arrows.png');
  background-position: -90px -21px;
  width: 14px;
  height: 20px;
}
.icon-arrow-orange-3 {
  background-image: image-url('sprites/arrows.png');
  background-position: -90px 0px;
  width: 14px;
  height: 21px;
}
.icon-arrow-orange {
  background-image: image-url('sprites/arrows.png');
  background-position: -26px -50px;
  width: 5px;
  height: 7px;
}
.icon-arrow-white {
  background-image: image-url('sprites/arrows.png');
  background-position: 0px -58px;
  width: 21px;
  height: 14px;
}
.icon-arrow_news {
  background-image: image-url('sprites/arrows.png');
  background-position: -90px -41px;
  width: 14px;
  height: 20px;
}
.icon-arrow_news_filter {
  background-image: image-url('sprites/arrows.png');
  background-position: -90px -61px;
  width: 6px;
  height: 9px;
}
.icon-arrow_news_hover {
  background-image: image-url('sprites/arrows.png');
  background-position: 0px -72px;
  width: 14px;
  height: 20px;
}