%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 euiSvgCheckmarkWhite() {
    height: 1rem;
    width: 1rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
}

@mixin euiSvgHyphenWhite() {
    height: 1rem;
    width: 1rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ERemove%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M400 256H112'/%3E%3C/svg%3E");
}

@mixin euiSvgCheckmark() {
    height: 1rem;
    width: 1rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23004494' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
}

@mixin euiSvgRadio() {
    height: 1rem;
    width: 1rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EEllipse%3C/title%3E%3Cpath fill='%23004494' stroke='%23004494' d='M256 464c-114.69 0-208-93.31-208-208S141.31 48 256 48s208 93.31 208 208-93.31 208-208 208z'/%3E%3C/svg%3E");
}

@mixin euiSvgRadioWhite() {
    height: 1rem;
    width: 1rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EEllipse%3C/title%3E%3Cpath fill='currentColor' stroke='%23fff' d='M256 464c-114.69 0-208-93.31-208-208S141.31 48 256 48s208 93.31 208 208-93.31 208-208 208z'/%3E%3C/svg%3E");
}

@mixin euiSvgRadioInvalid() {
    height: 1rem;
    width: 1rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EEllipse%3C/title%3E%3Cpath fill='%23da2131' stroke='%23da2131' d='M256 464c-114.69 0-208-93.31-208-208S141.31 48 256 48s208 93.31 208 208-93.31 208-208 208z'/%3E%3C/svg%3E");
}

@mixin euiSvgChevronForward() {
    height: 1rem;
    width: 1rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
}

@mixin euiSvgChevronDown() {
    height: 1rem;
    width: 1rem;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
}

@mixin euiSvgExternalLink() {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Ctitle%3EExternal Link%3C/title%3E%3Cpath fill='%23004494' d='M14 2v4H6v36h36v-8h4v12H2V2h12zm32 0v20h-4V8.667l-.201.404-16.97 16.97L22 23.214l16.97-16.97.484-.243H26V2h20z'/%3E%3C/svg%3E");
    background-color: transparent;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    content: "";
    display: inline-block;
    height: v(eui-base-spacing-m);
    margin-left: v(eui-base-spacing-2xs);
    width: v(eui-base-spacing-m);
}

@mixin euiSvgExternalLinkDark() {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Ctitle%3EExternal Link%3C/title%3E%3Cpath fill='%2380A2CA' d='M14 2v4H6v36h36v-8h4v12H2V2h12zm32 0v20h-4V8.667l-.201.404-16.97 16.97L22 23.214l16.97-16.97.484-.243H26V2h20z'/%3E%3C/svg%3E");
}




// NOT USED - attempt to colorize svg through css filter

// @function eui-base-get-color($shade, $hue: 0) {
//     @if ($shade == black) {
//         @return #000;

//     } @else if ($shade == white) {
//         @return #fff;

//     } @else {
//         $shadeMap: map-get($eui-base-tokens-colors, $shade);
//         @return map-get($shadeMap, $hue);
//     }
// }

// @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}');
// }
