@use 'sass:list';

@mixin render(
  $icons: (
    'close.svg',
  ),
  $properties
) {
  $url-list: ();

  @each $icon in $icons {
    $url-string: svg-load(#{$icon}, #{$properties});
    $url-list: list.append($url-list, $url-string, comma);
  }

  background-image: $url-list;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center, -1000em -1000em;
  display: var(--icon-display, block);
  width: var(--icon-width, var(--icon-size, 1em));
  height: var(--icon-height, var(--icon-size, 1em));
}

@mixin pos($index, $tail-length: 1) {
  $positions: ();
  $tail: ();

  @for $i from 1 through $index {
    $positions: list.append($positions, -1000em -1000em, comma);
  }

  @for $i from 1 through $tail-length {
    $tail: list.append($tail, -1000em -1000em, comma);
  }

  background-position: $positions, center, $tail;
}
