@import '../mixins/base';
@import '../typography/mixins';

$iconPrefix: '.icon-';

@mixin create_glyphs($glyphMap) {
  @each $glyph, $glyphInfo in $glyphMap {
    #{$iconPrefix}#{$glyph} {
      @include fontFamily(Body-WebS);
      &:before {
        content: map-get($glyphInfo, 'isoContent');
        color: map-get($glyphInfo, 'color');
        @content;
      }
    }
  }
}

@mixin create_icons($iconMap, $size: false) {
  @each $icon, $iconInfo in $iconMap {
    #{$iconPrefix}#{$icon} {
      &:before {
        content: "";
        display: block;
        @if $size != false {
          $size: if($size, map_get($iconInfo, "width"), $size);
          width: $size;
          height: $size;
        }
        background-position: map_get($iconInfo, "coordinates");
        //should change depending on sprite direction
        background-size: auto 100%;
        background-repeat: no-repeat;
        @content;
      }
    }
  }
}

@mixin change_icons($icons: ()) {
  @each $icon in $icons {
    #{$icon} {
      &:before {
        @content;
      }
    }
  }
}

@mixin icon_size($icons: (), $size: 10px) {
  @if(length($icons) > 0) {
    @each $icon in $icons {
      #{$icon} {
        &:before {
          width: $size;
          height: $size;
          @content;
        }
      }
    }
  } @else {
    &:before {
      width: $size;
      height: $size;
      @content;
    }
  }
}

// Expects coordinates from the top-left corner, as you would for normal background-position usage
// This will turn the coordinates into percentages, allowing icons to scale using width and height properties
@mixin sprite_location($x, $y, $spriteDimensions) {
  $spriteWidth: map_get($spriteDimensions, "spriteWidth");
  $spriteHeight: map_get($spriteDimensions, "spriteHeight");
  $iconDimension: map_get($spriteDimensions, "iconDimension");
  background-position: (($x / $spriteWidth * 100%) * -1) (($y / (($spriteHeight - $iconDimension)) * 100%) * -1);
}