@use "sass:map";
// common mixins imported from this file
@import "./../../mixins/scss/mixins";

/**
START : scss maps to hold repsective attribute values
**/
$sizes: (
	"x-small": 12px,
	"small": 16px,
	"medium": 20px,
	"large": 28px,
	"x-large": 36px
);

$states: (
	"default": (
		"fill": var(--color-icon-default),
		"hover-fill": var(--color-icon-default-hover)
	),
	"secondary": (
		"fill": var(--color-icon-secondary),
		"hover-fill": var(--color-icon-secondary-hover)
	),
	"subtle": (
		"fill": var(--color-icon-subtle),
		"hover-fill": var(--color-icon-subtle-hover)
	),
	"primary": (
		"fill": var(--color-primary-default),
		"hover-fill": var(--color-primary-default-hover)
	),
	"success": (
		"fill": var(--color-success-default),
		"hover-fill": var(--color-success-default-hover)
	),
	"danger": (
		"fill": var(--color-danger-default),
		"hover-fill": var(--color-danger-default-hover)
	),
	"warning": (
		"fill": var(--color-warning-default),
		"hover-fill": var(--color-warning-default-hover)
	),
	"neutral": (
		"fill": var(--color-neutral-default),
		"hover-fill": var(--color-neutral-default-hover)
	),
	"inherit": (
		"fill": var(--color-inherit-icon),
		"hover-fill": var(--color-inherit-icon-hover)
	)
);

/**
END : scss maps to hold repsective attribute values
**/

/**
:host selects the host element. 
in this case it is `f-icon`
**/
:host {
	// applying styles on inner elements
	div.f-icon {
		// Important :  always include base mixins
		@include base();
		display: inline-flex;
		align-items: center;
		justify-content: center;

		// iterating over states and applying css
		@each $state, $value in $states {
			&[state="#{$state}"] {
				svg {
					fill: map.get($value, "fill");
					stroke: none;
					*[fill^="white"] {
						fill: map.get($value, "fill");
					}
				}
				// adding clickable behavior
				&[clickable] {
					cursor: pointer;
					&:hover {
						svg {
							fill: map.get($value, "hover-fill");
							stroke: none;
							*[fill^="white"] {
								fill: map.get($value, "hover-fill");
							}
						}
					}
				}
			}
		}

		&.custom-state {
			svg {
				fill: inherit !important;
				stroke: none;
				*[fill^="white"] {
					fill: inherit !important;
				}
			}
			// adding clickable behavior
			&[clickable] {
				cursor: pointer;
				&:hover {
					svg {
						opacity: 0.9;
						*[fill^="white"] {
							opacity: 0.9;
						}
					}
				}
			}
		}

		&.fill-button-surface-dark {
			svg {
				fill: #202a36 !important;
				stroke: none;
				*[fill^="white"] {
					fill: #202a36 !important;
				}
			}
		}

		&.fill-button-surface-light {
			svg {
				fill: #fcfcfd !important;
				stroke: none;
				*[fill^="white"] {
					fill: #fcfcfd !important;
				}
			}
		}

		// Edge case : extend styles if `f-icon` is used on `f-button`
		&.fill-button-surface {
			&.fill-button-surface-input {
				svg {
					fill: var(--color-text-default) !important;
					stroke: none;
					*[fill^="white"] {
						fill: var(--color-text-default) !important;
					}
				}
				&:hover {
					svg {
						fill: var(--color-text-default-hover);
						stroke: none;
						*[fill^="white"] {
							fill: var(--color-text-default-hover);
						}
					}
				}
			}
			svg {
				fill: var(--color-surface-default) !important;
				stroke: none;
				*[fill^="white"] {
					fill: var(--color-surface-default) !important;
				}
			}

			&:hover {
				svg {
					fill: var(--color-surface-default-hover);
					stroke: none;
					*[fill^="white"] {
						fill: var(--color-surface-default-hover);
					}
				}
			}
		}

		/**
  * Iterating over sizes with padding, fontsize, height
  **/

		&.system-icon-size {
			width: 8px !important;
			height: 8px !important;
			svg,
			img {
				width: 8px !important;
				height: 8px !important;
			}
		}

		@each $size, $value in $sizes {
			&[size="#{$size}"] {
				font-size: $value;
				line-height: $value;
				width: $value;
				height: $value;
				svg,
				img {
					width: $value;
					height: $value;
				}

				&.f-tag-system-icon {
					width: 8px;
					height: 8px;
					svg,
					img {
						width: 8px;
						height: 8px;
					}
				}
				&.f-pictogram-small {
					width: 8px;
					height: 8px;
					svg,
					img {
						width: 8px;
						height: 8px;
					}
				}

				&.f-pictogram-x-large-emoji {
					font-size: 18px;
					line-height: 18px;
					width: 18px;
					height: 18px;
				}
				&.f-pictogram-large-emoji {
					font-size: 16px;
					line-height: 16px;
					width: 16px;
					height: 16px;
				}
				&.f-pictogram-medium-emoji {
					font-size: 14px;
					line-height: 14px;
					width: 14px;
					height: 14px;
				}
				&.f-pictogram-small-emoji {
					font-size: 10px;
					line-height: 10px;
					width: 10px;
					height: 10px;
				}
				&.f-tag-small-emoji {
					font-size: 8px;
					line-height: 8px;
					width: 8px;
					height: 8px;
				}
			}
		}
		&.f-input-icons-size {
			font-size: var(--form-input-icons-size);
			line-height: var(--form-input-icons-size);
			width: var(--form-input-icons-size);
			height: var(--form-input-icons-size);
			svg,
			img {
				width: var(--form-input-icons-size);
				height: var(--form-input-icons-size);
			}
		}
		// applying disabled mixins
		&[disabled] {
			@include disabled();
			opacity: 1;
		}

		// applying loading mixins
		&[loading] {
			@include rotate("svg");
		}

		&:focus {
			outline: var(--color-highlight-default) solid 2px;
		}
	}
}