%eui-internals-icons-svg {
	background: url("#{$eui-assets-path}/images/ionicons/eui-internals/icons-sprite-css.svg") no-repeat;
}

$eui-internal-icons: (
 	add: (width: 24px, height: 24px, backgroundXY: 0 0),
 	alert-circle: (width: 24px, height: 24px, backgroundXY: 25% 0),
 	checkbox: (width: 24px, height: 24px, backgroundXY: 0 33.333333333333336%),
 	checkmark: (width: 24px, height: 24px, backgroundXY: 25% 33.333333333333336%),
 	chevron-back: (width: 24px, height: 24px, backgroundXY: 50% 0),
 	chevron-down: (width: 24px, height: 24px, backgroundXY: 50% 33.333333333333336%),
 	chevron-forward: (width: 24px, height: 24px, backgroundXY: 0 66.66666666666667%),
 	chevron-up: (width: 24px, height: 24px, backgroundXY: 25% 66.66666666666667%),
 	close: (width: 24px, height: 24px, backgroundXY: 50% 66.66666666666667%),
 	close-circle: (width: 24px, height: 24px, backgroundXY: 75% 0),
 	ellipsis-horizontal: (width: 24px, height: 24px, backgroundXY: 75% 33.333333333333336%),
 	ellipsis-vertical: (width: 24px, height: 24px, backgroundXY: 75% 66.66666666666667%),
 	help: (width: 24px, height: 24px, backgroundXY: 0 100%),
 	help-circle: (width: 24px, height: 24px, backgroundXY: 25% 100%),
 	information: (width: 24px, height: 24px, backgroundXY: 50% 100%),
 	reorder-three: (width: 24px, height: 24px, backgroundXY: 75% 100%),
 	search: (width: 24px, height: 24px, backgroundXY: 100% 0),
);

@mixin eui-base-icon-svg-css($icon, $size: m) {
    $iconSpriteRef: null;

    @extend %eui-internals-icons-svg;
    $iconSpriteRef: map-get($eui-internal-icons, $icon);

    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    width: map-get($iconSpriteRef, width);
    height: map-get($iconSpriteRef, height);
    background-position: map-get($iconSpriteRef, backgroundXY);
    content: '';

    @if ($size == xs) {
        transform: scale(0.5);
    } @else if ($size == s) {
        transform: scale(0.75);
    } @else if ($size == m) {
        transform: scale(1);
    } @else if ($size == l) {
        transform: scale(1.5);
    } @else if ($size == xl) {
        transform: scale(2);
    } @else if ($size == 2xl) {
        transform: scale(2.5);
    } @else if ($size == 3xl) {
        transform: scale(3);
    }
}

@mixin eui-base-icon-svg-css-color($shade, $hue: 0, $opacity: 1) {
    $color: eui-base-get-color($shade, $hue);

    $r: red($color) / 255;
    $g: green($color) / 255;
    $b: blue($color) / 255;
    $a: $opacity;

    // grayscale fallback if SVG from data url is not supported
    $lightness: lightness($color);
    filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);

    // color filter
    $svg-filter-id: "recolor";
    filter: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
        <feColorMatrix type="matrix" values="\
          0 0 0 0 #{$r}\
          0 0 0 0 #{$g}\
          0 0 0 0 #{$b}\
          0 0 0 #{$a} 0\
        "/>\
      </filter>\
    </svg>\
    ##{$svg-filter-id}');
}
