@use 'sass:list';
@import './../../functions';

@mixin icon-styling($icon, $icon-sizes) {
  &::before {
    @include image('icons/#{$icon}.svg', true);
  }

  @each $size, $styles in $icon-sizes {
    @include icon-classes(width, list.nth($styles, 1), $size);
    @include icon-classes(height, list.nth($styles, 2), $size);
    @include icon-classes(margin-top, list.nth($styles, 3), $size);
    @include icon-classes(margin-right, list.nth($styles, 4), $size, 'left');
    @include icon-classes(margin-left, list.nth($styles, 4), $size, 'right');
  }
}

// If the $value passed in isn't d (for default), render the styling on the passed-in class (if it exists)
// and the size (if it isn't medium, which is default)
@mixin icon-classes($property, $value, $size: 'medium', $class: false) {
  @if $value != 'd' {
    $classname: '';

    @if $class {
      $classname: '.#{$class}';
    }

    @if $size != 'medium' {
      $classname: $classname + '.#{$size}';
    }

    &#{$classname}:before {
      #{$property}: px-to-rem($value);
    }
  }
}
