@use './variables' as *;

@font-face {
	font-family: '#{$font-family}';
	src:
		url('#{$font-path}/#{$font-family}.ttf?#{$font-code}') format('truetype'),
		url('#{$font-path}/#{$font-family}.woff?#{$font-code}') format('woff'),
		url('#{$font-path}/#{$font-family}.svg?#{$font-code}##{$font-family}') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.suicons {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: '#{$font-family}' !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;
	-moz-osx-font-smoothing: grayscale;
}

@each $key, $size in $font-size {
	.suicons--#{$key} {
		width: $size;
		height: $size;
		display: inline-block;
		font-size: $size;
	}
}

@each $icon-name, $icon-code in $suicons {
	.suicons--#{$icon-name} {
		&:before {
			content: $icon-code;
		}
	}
}