SU-SWS/decanter

///
/// Mixin display icon
///
/// @name display-icon
///
/// @todo Needs to be documented. Should this be reworked for asset management purposes?
///
///  @param {} $icon       - todo
///  @param {} $direction  - todo
///  @param {} $size       - todo
///  @param {} $margin     - todo
///  @param {} $hover      - todo
///
/// @group mixin
@mixin display-icon($icon, $direction, $size, $margin, $hover) {
  &::#{$direction} {
    background-image: url('#{$su-image-path}/#{$icon}.png');
    background-image: url('#{$su-image-path}/#{$icon}.svg');
    background-size: 100%;
    content: '';
    display: inline-block;
    height: $size;
    width: $size;

    @if $direction == "after" {
      @include margin(null null null $margin);
    }
    @else {
      @include margin(null $margin null null);
    }
  }

  @if $hover == "hover" {
    &:hover::#{$direction} {
      background-image: url('#{$su-image-path}/#{$icon}-hover.png');
      background-image: url('#{$su-image-path}/#{$icon}-hover.svg');
    }
  }
}