/* Generated by grunt-webfont */
/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */

@font-face {
	font-family: "fxos-icons";
	src: url("fxos-icons/fxos-icons.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

[data-icon]:before,
.ligature-icons {
	font-family: "fxos-icons";
	content: attr(data-icon);
	display: inline-block;
	width: 1em; /* stop overflow in chrome */
	font-size: 30px;
	font-weight: 500;
	font-style: normal;
	white-space: nowrap; /* stop wrapping in chrome */
  text-align: center;
  overflow: hidden;
	text-decoration: inherit;
	text-transform: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[data-icon]:not([data-l10n-id]):not([aria-label]):not([aria-hidden="true"]):before {
	/* Highlight cases where icons are not localized and still visible to screen
	   reader */
	background: rgba(255, 0, 0, 0.4);
}

[data-icon]:not([data-l10n-id]):not([aria-label]):not([aria-hidden="true"]):after {
	background: #333;
	color: #fff;
	position: absolute;
	width: 20rem;
	border-radius: 0.5rem;
	padding: 0.5rem;
	content: "Icon is not localized and is still visible to screen reader. Please add data-l10n-id or aria-label for localization or use aria-hidden to hide the icon from screen reader.";
	z-index: 9999;
}