@mixin icons-internal($icons) {
	@if & {
		@each $icon in $icons {
			--icon-#{$icon}: url("../../../icons/#{$icon}.svg");
		}
	}
}

@mixin icons($icons, $path: "src/icons") {
	@if & {
		@each $icon in $icons {
			--icon-#{$icon}: url("../../../../../#{$path}/#{$icon}.svg");
		}
	}
}

@mixin icon($icon, $type: "background") {
	@if & {
		$value: var(--icon-#{$icon}) no-repeat center / 100%;

		width: var(--icon-size, 1.5rem);
		height: var(--icon-size, 1.5rem);

		@if $type == "mask" {
			mask: $value;
		} @else {
			background: $value;
		}
	}
}

@mixin mask-icon($icon) {
	@if & {
		background-color: currentColor;

		@include icon($icon, "mask");
	}
}