@use 'sass:map';
@use '../../base/variables/icons' as *;
@use '../../base/maps/tokens' as *;
@use '../../base/functions' as *;

.icon {
	display: inline-block;
	height: 4rem;
	font-size: 4rem;
	position: relative;
	transition: transform var(--transition-fast);
	width: 4rem;

	// Icon sizes: sm, rg, md, lg >> Used for brand icons
	@each $icon-key, $icon-val in $brandui-icon-size {
		&.icon-#{$icon-key} {
			height: $icon-val;
			width: $icon-val;
		}
	}

	&::before {
		display: block;
		height: 100%;
		position: relative;
		width: 100%;
	}

	&-border {
		border-width: 0.0625rem;
		border-style: solid;
		border-radius: var(--radius-medium);
		padding: var(--padding-slim);
		border-color: with-opacity(var(--ui-subtle), 70);
	}

	@each $icon-key, $icon-val in $snyk-icons {
		&.icon-#{$icon-key} {
			&::before {
				content: url($icon-val);
			}
		}
	}

	&.icon-solid {
		@each $icon-key, $icon-val in $snyk-icons {
			&.icon-#{$icon-key} {
				mask: url($icon-val) 100% no-repeat;

				&::before {
					content: '';
					mask-image: url($icon-val);
					mask-position: center;
					mask-repeat: no-repeat;
					mask-size: contain;
					background-color: currentcolor;
				}
			}
		}
	}
}

// Icon sizes
@each $icon-key, $icon-val in $brandui-icon-size {
	.icon-#{$icon-key} {
		font-size: $icon-val;
		height: $icon-val;
		width: $icon-val;
	}
}

.general-icon {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: brandui-icons !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	color: var(--ui-text);

	@each $icon-key, $icon-val in $brandui-general-icons {
		&.icon-#{$icon-key} {
			&::before {
				content: $icon-val;
			}
		}
	}
}

// General Icon sizes
@each $icon-key, $icon-val in $brandui-general-icon-size {
	.icon-#{$icon-key} {
		font-size: $icon-val;
	}
}