// Refactoring:
// https://github.com/alphagov/govuk_elements/blob/master/public/sass/elements/_icons.scss

// Icons
// ==========================================================================

// Icon mixin
@mixin icon($icon-name, $icon-width, $icon-height, $icon-sub-folder: false) {

  width: #{$icon-width}px;
  height: #{$icon-height}px;

  @if $icon-sub-folder {
    background-image: file-url("#{$icon-sub-folder}/#{$icon-name}.png");

    @include device-pixel-ratio {
      background-image: file-url("#{$icon-sub-folder}/#{$icon-name}-2x.png");
      background-size: 100%;
    }

  } @else {
    background-image: file-url("#{$icon-name}.png");

    @include device-pixel-ratio {
      background-image: file-url("#{$icon-name}-2x.png");
      background-size: 100%;
    }
  }
}

.gv-c-icon {
  display: inline-block;

  background-repeat: no-repeat;
  background-position: 0 0;
}

.gv-c-icon--calendar {
  @include icon(icon-calendar, 27, 27);
}

.gv-c-icon--file-download {
  @include icon(icon-file-download, 30, 39);
}

.gv-c-icon--important {
  @include icon(icon-important, 35, 35);
}

.gv-c-icon--information {
  @include icon(icon-information, 27, 27);
}

.gv-c-icon--locator {
  @include icon(icon-locator, 26, 36);
}

.gv-c-icon--pointer {
  @include icon(icon-pointer, 30, 19);
}

.gv-c-icon--pointer-black {
  @include icon(icon-pointer-black, 23, 23);
}

.gv-c-icon--search {
  @include icon(icon-search, 30, 22);
}

// GOV.UK step icons
@for $i from 1 through 14 {
  .gv-c-icon--step-#{$i} {
    @include icon(icon-step--#{$i}, 23, 23, icon-steps);
  }
}
