// stylelint-disable order/order
// stylelint-disable scss/operator-no-newline-after
@use "sass:math";
@use "sass:string";

@function encode-svg($svg) {
  $encoded: "";
  $slice: 2000;
  $index: 0;
  $loops: math.ceil(math.div(string.length($svg), $slice));

  @if not string.index($svg, xmlns) {
    $svg: str-replace($svg, "<svg", '<svg xmlns="http://www.w3.org/2000/svg"');
  }

  @for $i from 1 through $loops {
    $chunk: string.slice($svg, $index, $index + $slice - 1);
    $chunk: str-replace($chunk, '"', "'");
    $chunk: str-replace($chunk, "%", "%25");
    $chunk: str-replace($chunk, "#", "%23");
    $chunk: str-replace($chunk, "{", "%7B");
    $chunk: str-replace($chunk, "}", "%7D");
    $chunk: str-replace($chunk, "<", "%3C");
    $chunk: str-replace($chunk, ">", "%3E");
    $encoded: #{$encoded}#{$chunk};
    $index: $index + $slice;
  }
  @return url("data:image/svg+xml;utf8,#{$encoded}");
}

@mixin background-svg($svg) {
  background-image: encode-svg($svg);
}

@mixin mask-svg($svg, $color: currentColor) {
  background-color: $color;

  -webkit-mask-image: encode-svg($svg);
  mask-image: encode-svg($svg);
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 1em;
  mask-size: 1em;
}

@function str-replace($string, $search, $replace: "") {
  $index: string.index($string, $search);
  @return if(
    $index,
    string.slice($string, 1, $index - 1) + $replace +
      str-replace(
        string.slice($string, $index + string.length($search)),
        $search,
        $replace
      ),
    $string
  );
}