/*
LESS 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 name;

At the bottom of this section, we provide information about the spritesheet itself
@spritesheet: width height image @spritesheet-sprites;
*/
@contact-bank-name: contact-bank;
@contact-bank-x: 92px;
@contact-bank-y: 0px;
@contact-bank-offset-x: -92px;
@contact-bank-offset-y: 0px;
@contact-bank-width: 24px;
@contact-bank-height: 24px;
@contact-bank-total-width: 138px;
@contact-bank-total-height: 127px;
@contact-bank-image: '../images/icons-sprite.png?v=0.1.0';
@contact-bank: 92px 0px -92px 0px 24px 24px 138px 127px '../images/icons-sprite.png?v=0.1.0' contact-bank;
@contact-email-name: contact-email;
@contact-email-x: 56px;
@contact-email-y: 88px;
@contact-email-offset-x: -56px;
@contact-email-offset-y: -88px;
@contact-email-width: 24px;
@contact-email-height: 24px;
@contact-email-total-width: 138px;
@contact-email-total-height: 127px;
@contact-email-image: '../images/icons-sprite.png?v=0.1.0';
@contact-email: 56px 88px -56px -88px 24px 24px 138px 127px '../images/icons-sprite.png?v=0.1.0' contact-email;
@contact-euro-name: contact-euro;
@contact-euro-x: 92px;
@contact-euro-y: 28px;
@contact-euro-offset-x: -92px;
@contact-euro-offset-y: -28px;
@contact-euro-width: 24px;
@contact-euro-height: 24px;
@contact-euro-total-width: 138px;
@contact-euro-total-height: 127px;
@contact-euro-image: '../images/icons-sprite.png?v=0.1.0';
@contact-euro: 92px 28px -92px -28px 24px 24px 138px 127px '../images/icons-sprite.png?v=0.1.0' contact-euro;
@contact-fax-name: contact-fax;
@contact-fax-x: 92px;
@contact-fax-y: 56px;
@contact-fax-offset-x: -92px;
@contact-fax-offset-y: -56px;
@contact-fax-width: 24px;
@contact-fax-height: 24px;
@contact-fax-total-width: 138px;
@contact-fax-total-height: 127px;
@contact-fax-image: '../images/icons-sprite.png?v=0.1.0';
@contact-fax: 92px 56px -92px -56px 24px 24px 138px 127px '../images/icons-sprite.png?v=0.1.0' contact-fax;
@contact-phone-name: contact-phone;
@contact-phone-x: 0px;
@contact-phone-y: 88px;
@contact-phone-offset-x: 0px;
@contact-phone-offset-y: -88px;
@contact-phone-width: 24px;
@contact-phone-height: 24px;
@contact-phone-total-width: 138px;
@contact-phone-total-height: 127px;
@contact-phone-image: '../images/icons-sprite.png?v=0.1.0';
@contact-phone: 0px 88px 0px -88px 24px 24px 138px 127px '../images/icons-sprite.png?v=0.1.0' contact-phone;
@contact-zl-name: contact-zl;
@contact-zl-x: 28px;
@contact-zl-y: 88px;
@contact-zl-offset-x: -28px;
@contact-zl-offset-y: -88px;
@contact-zl-width: 24px;
@contact-zl-height: 24px;
@contact-zl-total-width: 138px;
@contact-zl-total-height: 127px;
@contact-zl-image: '../images/icons-sprite.png?v=0.1.0';
@contact-zl: 28px 88px -28px -88px 24px 24px 138px 127px '../images/icons-sprite.png?v=0.1.0' contact-zl;
@down-arrow-name: down-arrow;
@down-arrow-x: 26px;
@down-arrow-y: 116px;
@down-arrow-offset-x: -26px;
@down-arrow-offset-y: -116px;
@down-arrow-width: 21px;
@down-arrow-height: 11px;
@down-arrow-total-width: 138px;
@down-arrow-total-height: 127px;
@down-arrow-image: '../images/icons-sprite.png?v=0.1.0';
@down-arrow: 26px 116px -26px -116px 21px 11px 138px 127px '../images/icons-sprite.png?v=0.1.0' down-arrow;
@flag-en-name: flag-en;
@flag-en-x: 120px;
@flag-en-y: 22px;
@flag-en-offset-x: -120px;
@flag-en-offset-y: -22px;
@flag-en-width: 18px;
@flag-en-height: 18px;
@flag-en-total-width: 138px;
@flag-en-total-height: 127px;
@flag-en-image: '../images/icons-sprite.png?v=0.1.0';
@flag-en: 120px 22px -120px -22px 18px 18px 138px 127px '../images/icons-sprite.png?v=0.1.0' flag-en;
@flag-it-name: flag-it;
@flag-it-x: 84px;
@flag-it-y: 88px;
@flag-it-offset-x: -84px;
@flag-it-offset-y: -88px;
@flag-it-width: 18px;
@flag-it-height: 18px;
@flag-it-total-width: 138px;
@flag-it-total-height: 127px;
@flag-it-image: '../images/icons-sprite.png?v=0.1.0';
@flag-it: 84px 88px -84px -88px 18px 18px 138px 127px '../images/icons-sprite.png?v=0.1.0' flag-it;
@flag-pl-name: flag-pl;
@flag-pl-x: 120px;
@flag-pl-y: 0px;
@flag-pl-offset-x: -120px;
@flag-pl-offset-y: 0px;
@flag-pl-width: 18px;
@flag-pl-height: 18px;
@flag-pl-total-width: 138px;
@flag-pl-total-height: 127px;
@flag-pl-image: '../images/icons-sprite.png?v=0.1.0';
@flag-pl: 120px 0px -120px 0px 18px 18px 138px 127px '../images/icons-sprite.png?v=0.1.0' flag-pl;
@logo-name: logo;
@logo-x: 0px;
@logo-y: 0px;
@logo-offset-x: 0px;
@logo-offset-y: 0px;
@logo-width: 88px;
@logo-height: 40px;
@logo-total-width: 138px;
@logo-total-height: 127px;
@logo-image: '../images/icons-sprite.png?v=0.1.0';
@logo: 0px 0px 0px 0px 88px 40px 138px 127px '../images/icons-sprite.png?v=0.1.0' logo;
@menu-bg1-name: menu-bg1;
@menu-bg1-x: 120px;
@menu-bg1-y: 80px;
@menu-bg1-offset-x: -120px;
@menu-bg1-offset-y: -80px;
@menu-bg1-width: 9px;
@menu-bg1-height: 5px;
@menu-bg1-total-width: 138px;
@menu-bg1-total-height: 127px;
@menu-bg1-image: '../images/icons-sprite.png?v=0.1.0';
@menu-bg1: 120px 80px -120px -80px 9px 5px 138px 127px '../images/icons-sprite.png?v=0.1.0' menu-bg1;
@newsletter-bg1-name: newsletter-bg1;
@newsletter-bg1-x: 0px;
@newsletter-bg1-y: 44px;
@newsletter-bg1-offset-x: 0px;
@newsletter-bg1-offset-y: -44px;
@newsletter-bg1-width: 86px;
@newsletter-bg1-height: 40px;
@newsletter-bg1-total-width: 138px;
@newsletter-bg1-total-height: 127px;
@newsletter-bg1-image: '../images/icons-sprite.png?v=0.1.0';
@newsletter-bg1: 0px 44px 0px -44px 86px 40px 138px 127px '../images/icons-sprite.png?v=0.1.0' newsletter-bg1;
@slider-next-name: slider-next;
@slider-next-x: 120px;
@slider-next-y: 44px;
@slider-next-offset-x: -120px;
@slider-next-offset-y: -44px;
@slider-next-width: 16px;
@slider-next-height: 14px;
@slider-next-total-width: 138px;
@slider-next-total-height: 127px;
@slider-next-image: '../images/icons-sprite.png?v=0.1.0';
@slider-next: 120px 44px -120px -44px 16px 14px 138px 127px '../images/icons-sprite.png?v=0.1.0' slider-next;
@slider-prev-name: slider-prev;
@slider-prev-x: 120px;
@slider-prev-y: 62px;
@slider-prev-offset-x: -120px;
@slider-prev-offset-y: -62px;
@slider-prev-width: 16px;
@slider-prev-height: 14px;
@slider-prev-total-width: 138px;
@slider-prev-total-height: 127px;
@slider-prev-image: '../images/icons-sprite.png?v=0.1.0';
@slider-prev: 120px 62px -120px -62px 16px 14px 138px 127px '../images/icons-sprite.png?v=0.1.0' slider-prev;
@up-arrow-name: up-arrow;
@up-arrow-x: 0px;
@up-arrow-y: 116px;
@up-arrow-offset-x: 0px;
@up-arrow-offset-y: -116px;
@up-arrow-width: 22px;
@up-arrow-height: 11px;
@up-arrow-total-width: 138px;
@up-arrow-total-height: 127px;
@up-arrow-image: '../images/icons-sprite.png?v=0.1.0';
@up-arrow: 0px 116px 0px -116px 22px 11px 138px 127px '../images/icons-sprite.png?v=0.1.0' up-arrow;
@spritesheet-width: 138px;
@spritesheet-height: 127px;
@spritesheet-image: '../images/icons-sprite.png?v=0.1.0';
@spritesheet-sprites: @contact-bank @contact-email @contact-euro @contact-fax @contact-phone @contact-zl @down-arrow @flag-en @flag-it @flag-pl @logo @menu-bg1 @newsletter-bg1 @slider-next @slider-prev @up-arrow;
@spritesheet: 138px 127px '../images/icons-sprite.png?v=0.1.0' @spritesheet-sprites;

/*
The provided classes are intended to be used with the array-like variables

.icon-home {
  .sprite-width(@icon-home);
}
.icon-email {
  .sprite(@icon-email);
}
*/
.sprite-width(@sprite) {
  width: extract(@sprite, 5);
}

.sprite-height(@sprite) {
  height: extract(@sprite, 6);
}

.sprite-position(@sprite) {
  @sprite-offset-x: extract(@sprite, 3);
  @sprite-offset-y: extract(@sprite, 4);
  background-position: @sprite-offset-x @sprite-offset-y;
}

.sprite-image(@sprite) {
  @sprite-image: extract(@sprite, 9);
  @sprite-image-bare: ~`"@{sprite-image}".slice(1, -1)`;
  background-image: url(@sprite-image-bare);
}

.sprite(@sprite) {
  .sprite-image(@sprite);
  .sprite-position(@sprite);
  .sprite-width(@sprite);
  .sprite-height(@sprite);
}

/*
The `.sprites` mixin generates identical output to the CSS template
  but can be overridden inside of LESS

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

.sprites(@spritesheet-sprites);
*/
.sprites(@sprites, @i: 1) when (@i <= length(@sprites)) {
  @sprite: extract(@sprites, @i);
  @sprite-name: extract(@sprite, 10);
  .@{sprite-name} {
    .sprite(@sprite);
  }
  .sprites(@sprites, @i + 1);
}