%hum-icons {
	font-family: 'hummingbird-icons' !important; // Use !important to prevent issues with browser extensions that change fonts.
	speak: none;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	text-rendering: auto;
	display: inline-block;
	color: inherit;
	opacity: 1;
	direction: ltr;

	// Better Font Rendering
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	@media all and (-ms-high-contrast: none) {
		color: $icon-color;
	}
	@media all and (-ms-high-contrast: active) {
		color: $icon-lighter-color;
	}
}

@mixin icon($position: before, $icon: false, $styles: true) {
	@if $position == both {
		$position: 'before, &:after';
	}
	// Either a :before or :after pseudo-element, or both, defaulting to :before.
	&:#{$position} {
		@if $icon {
			// A particular icon has been specified.
			content: "#{map-get($icons, $icon)}";
		}
		@if $styles {
			@extend %hum-icons;
		}
		// Include any extra rules supplied for the pseudo-element.
		@content;
	}
}

// Map icon names to font unicode characters.
$icons: (
		optimization: "\e900",
		add-comment: "\e901",
		mobile: "\e902",
		emoji: "\e903",
		page: "\e904",
		comment: "\e905",
		question: "\e906",
		remove-query: "\e907",
		flag: "\e908",
);


@font-face {
	font-family: 'hummingbird-icons';
	src: url('#{$hummingbird-font-path}hummingbird-icons.eot?#{$sui-version}');
	src: url('#{$hummingbird-font-path}hummingbird-icons.eot?#{$sui-version}') format('embedded-opentype'),
	url('#{$hummingbird-font-path}hummingbird-icons.ttf?#{$sui-version}') format('truetype'),
	url('#{$hummingbird-font-path}hummingbird-icons.woff?#{$sui-version}') format('woff'),
	url('#{$hummingbird-font-path}hummingbird-icons.woff2?#{$sui-version}') format('woff2'),
	url('#{$hummingbird-font-path}hummingbird-icons.svg?#{$sui-version}') format('svg');
	font-weight: normal;
	font-style: normal;
}

@include body-class(false) {

	// Set the required styles on all icons.
	[class*="hum-icon-"] {
		display: flex;
		@include icon(both);
	}

	// Icon sizes.
	[class*="hum-icon-"].sui-xl {
		&:before {
			font-size: 30px;
		}
	}

	[class*="hum-icon-"].sui-lg {
		&:before {
			font-size: 20px;
		}
	}

	[class*="hum-icon-"].sui-md {
		&:before {
			font-size: 16px;
		}
	}

	[class*="hum-icon-"].sui-sm {
		&:before {
			font-size: 12px;
		}
	}

	// Setup a class name for each icon.
	@each $name, $char in $icons {
		.hum-icon-#{$name}:before {
			content: $char;
		}
	}
}