@use "sass:math";
@use "sass:map";
@use "sass:list";
@use "../helpers";
@use "../variables";

$default-icon-size: 24;
$default-icon-size-rem: #{helpers.px-to-rem($default-icon-size)};
$default-icon-variants: "default", "filled";

$default-icon-content: var(--db-icon, attr(data-icon));
$default-icon-content-after: var(--db-icon-after, attr(data-icon-after));

$default-icon-margin-end: var(
	--db-icon-margin-end,
	#{variables.$db-spacing-fixed-xs}
);
$default-icon-margin-start: var(
	--db-icon-margin-start,
	#{variables.$db-spacing-fixed-xs}
);

$default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});

@function get-icon-font-size($font-size, $line-height) {
	@return (math.div($font-size, 1rem) * 16 * $line-height);
}

@function get-icon-size($icon-font-size) {
	@if ($icon-font-size<20) {
		@return 16;
	}

	@if ($icon-font-size<24) {
		@return 20;
	}

	@if ($icon-font-size<32) {
		@return 24;
	}

	@return 32;
}

@mixin icon-content($icon) {
	content: $icon;
	// Hiding icon from screenreaders, https://www.w3.org/TR/css-content-3/#alt
	content: $icon / "";
}

@mixin to-filled-icon() {
	--db-icon-font-family: var(--db-icon-filled-font-family, "db-ux-filled");
}

// Icon SCSS mixin
@mixin set-icon($icon: "", $position: "before") {
	&:not([data-hide-icon-#{$position}="true"]) {
		&::#{$position} {
			@if $icon != "" {
				@extend %icon;

				@if $position == "before" {
					--db-icon: "#{$icon}";

					margin-inline-end: $default-icon-margin-end;
				}

				@if $position == "after" {
					--db-icon-after: "#{$icon}";

					@include icon-content($default-icon-content-after);

					margin-inline-start: $default-icon-margin-start;
				}
			}
		}
	}
}

// SCSS mixin for elements that text should get hidden in favour of only displaying the included icon
@mixin is-icon-text-replace($position: "before") {
	font-size: 0 !important;

	@if $position == "before" {
		&::before {
			--db-icon-margin-end: 0;
		}
		/* stylelint-disable-next-line at-rule-empty-line-before */
	} @else {
		&::after {
			--db-icon-margin-start: 0;
		}
	}
}

@mixin has-no-icon() {
	&:not([data-icon]) {
		@content;
	}
}

@mixin variant-icons($variant) {
	@include has-no-icon() {
		&::before {
			@if ($variant == "critical") {
				--db-icon: "exclamation_mark_circle";
				/* stylelint-disable-next-line at-rule-empty-line-before */
			} @else if ($variant == "informational" or $variant == "neutral") {
				--db-icon: "information_circle";
				/* stylelint-disable-next-line at-rule-empty-line-before */
			} @else if ($variant == "warning") {
				--db-icon: "exclamation_mark_triangle";
				/* stylelint-disable-next-line at-rule-empty-line-before */
			} @else if ($variant == "successful") {
				--db-icon: "check_circle";
			}
		}
	}
}

%icon {
	@include icon-content($default-icon-content); // TODO: ONLY FOR data-icon
	// Hiding icon from screenreaders
	-webkit-alt: "";
	alt: "";
	color: var(--db-icon-color, inherit);
	display: inline-block;

	/*** icon - placeholder ***/
	// * use !important to prevent issues with browser extensions that change fonts
	font-family: var(
		--db-icon-font-family,
		var(--db-icon-default-font-family, "db-ux-default")
	) !important;
	font-size: $default-icon-font-size;

	// * Better Font Rendering ===========
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-style: normal;
	font-variant: normal;
	font-weight: var(--db-icon-font-weight, normal);
	line-height: 1;
	/* stylelint-disable-next-line declaration-property-value-no-unknown */
	speak: none; // Hiding icon from screenreaders, fallback by older notation
	/* stylelint-disable-next-line declaration-property-value-no-unknown */
	speak: never; // Hiding icon from screenreaders
	text-transform: none;
	vertical-align: middle;
	block-size: $default-icon-font-size;
	inline-size: $default-icon-font-size;

	// Hiding icon from screenreaders
	@media aural {
		content: none;
	}

	@media speech {
		content: none;
	}
}