// 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("icons/#{$icon-sub-folder}/#{$icon-name}.png");

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

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

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

.icon {
  display: inline-block;

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

// GOV.UK front end toolkit icons
.icon-calendar {
  @include icon(icon-calendar, 27, 27);
}

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

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

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

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

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

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

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


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

// Propose replacing step icons with circles
.circle {
  display: inline-block;
  @include border-radius(50%);

  background: $black;
  color: $white;

  font-family: $NTA-Light-Tabular;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

// All step circles are 24px x 24px
.circle-step {
  min-width: 24px;
  min-height: 24px;
  line-height: 24px;
}

.circle-step-large {
  font-size: 19px;
  min-width: 38px;
  min-height: 38px;
  line-height: 38px;
}