@use "../01-abstract/variables" as *;
@use "sass:color";
@use "sass:list";
@use "sass:map";

/**
 * Get svg url - Display a svg in background image
 *
 * @author Nicolas Langle
 *
 * @param $name
 * @param $fill
 * @param $opacity
 * @param $style
 *
 * Examples :
 *
 *      .my-icon {
 *          background-image: get-svg-url("arrow", $color-primary);
 *          background-repeat: no-repeat;
 *          background-position: center;
 *          background-size: 20px;
 *      }
 *
 *      // With css mask (for icon with current color)
 *      .my-icon {
 *          width; 20px;
 *          height: 20px;
 *          background-color: currentColor;
 *          -webkit-mask-image: get-svg-url("arrow", "");
 *          mask-image: get-svg-url("arrow", "");
 *      }
 *
 */

@function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") {

	$svgs: (
		// name-of-the-svg: (viewBox, content of the svg element)
		"arrow": ("0 0 18 14", "%3Cpath d='M17.25 7 10.37.12l-.96.97 5.2 5.22H.76V7.7h13.87L9.4 12.9l.96.96L17.25 7Z'/%3E"),
		"down": ("0 0 11.2 6.7", "3Cpath d='M0 .5C0 .4.1.2.2.1c.2-.2.5-.1.7.1l4.6 5.3.1.1s.1 0 .1-.1L10.3.1c.2-.1.5-.2.7 0 .2.2.2.5.1.7L6.5 6.2c-.2.3-.5.5-.9.5s-.7-.2-.9-.6L.1.8C0 .7 0 .6 0 .5z'/%3E"),
		"external": ("0 0 20 20", "3Cpath d='M3.1 19.6A3.1 3.1 0 0 1 0 16.4V3.1A3.2 3.2 0 0 1 3.1 0H4c.4 0 .7.3.7.7 0 .4-.3.8-.7.8H3c-.9 0-1.6.7-1.6 1.6v13.3c0 1 .7 1.7 1.6 1.7h13.2c.9 0 1.6-.8 1.6-1.7v-.8c0-.4.4-.7.8-.7s.7.3.7.7v.8c0 1.7-1.4 3.2-3.1 3.2H3ZM18.7 0c.4 0 .7.3.7.7v10c0 .4-.4.7-.8.7s-.7-.3-.7-.8V2.5l-9.7 9.8c-.3.2-.8.3-1 0a.7.7 0 0 1 0-1l9.7-9.8H8.8c-.5 0-.8-.3-.8-.7 0-.4.3-.8.8-.8h9.9Z'/%3E"),
		"close": ("0 0 20 20", "3Cpath d='M5.442 5.442 5 5.883l2.058 2.059L9.116 10l-2.058 2.058L5 14.117l.442.441.441.442 2.059-2.058L10 10.884l2.058 2.058L14.117 15l.441-.442.442-.441-2.058-2.059L10.884 10l2.058-2.058L15 5.883l-.442-.441L14.117 5l-2.059 2.058L10 9.116 7.942 7.058 5.883 5l-.441.442'/%3E"),
	);

	@if not map.has-key($svgs, $name) {
		@return "";
	}

	@if ($style != "") {
		$style: " style='" + $style + "'";
	}

	@if ($fill != "") {
		$fill: " fill='rgba(#{color.channel($fill, 'red'), color.channel($fill, 'green'), color.channel($fill, 'blue'), $opacity})'";
	}

	@return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + list.nth(map.get($svgs, $name), 1) + "'%3E%" + list.nth(map.get($svgs, $name), 2) + "%3C/svg%3E");  /* stylelint-disable-line */
}
