@import './functions.scss';
@import './variables';

/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @returns {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

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

  @return $string;
}

// https://stackoverflow.com/questions/43896368/svg-as-a-background-image-in-mixin-setting-color-via-a-sass-variable
@function hex-to-url($color) {
  $newcolor: str-replace('#{$color}', '#', '%23');
  @return $newcolor;
}

@mixin hamburger-image($color) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='18' viewBox='0 0 25 18'%3E%3Cpath fill='#{hex-to-url($color)}' fill-rule='evenodd' d='M2 7h21a2 2 0 1 1 0 4H2a2 2 0 1 1 0-4zm0 7h21a2 2 0 1 1 0 4H2a2 2 0 1 1 0-4zM2 0h21a2 2 0 1 1 0 4H2a2 2 0 1 1 0-4z'%3E%3C/path%3E%3C/svg%3E");
}