////
//// @group icons
////

/// Output classes to build the PNG icons
///
///
/// @param {String} $icon-name
///   Icon name that matches one of the ones in the list
///
/// @param {String} $size-name
///   Size name for the class-naming convention
///
/// @param {String} $size-px
///   Used to build folder structure of PNG fallbacks in different sizes

@mixin png-bg-icon($icon-name, $size-name, $size-px) {
  .us-icon--#{$icon-name}.us-icon--#{$size-name},
  .us-icon--#{$icon-name}--after.us-icon--#{$size-name}--after:after,
  .us-icon--#{$icon-name}--before.us-icon--#{$size-name}--before:before {
    background-image: url(ustyle-image-path("#{$base-icon-path}#{$size-px}/#{$icon-name}.png"));
  }
}

@each $icon in $icons {
  @each $size in $icon-sizes {
    $size-name: nth($size, 1);
    $pixels: nth($size, 2);
    @if $svg-first == false {
      @include png-bg-icon($icon, $size-name, $pixels);
    } @else {
      #{$png-support-class} {
        @include png-bg-icon($icon, $size-name, $pixels);
      }
    }
  }
}