// 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%;
  }
}

}

.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: $toolkit-font-stack-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;

}