@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;

.ontario-icon svg,
// Fractal component style coverage ↓
.ontario-icon {
	display: inline-block;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */
	vertical-align: middle;
	/* Paths and strokes that overflow the viewBox can show in IE11. */
	overflow: hidden;
}

.ontario-icon--blue svg {
	stroke: colours.$ontario-colour-icon-blue;
	fill: colours.$ontario-colour-icon-blue;
}

.ontario-icon--grey svg {
	stroke: colours.$ontario-colour-icon-grey;
	fill: colours.$ontario-colour-icon-grey;
}

.ontario-icon--black svg {
	stroke: colours.$ontario-colour-icon-black;
	fill: colours.$ontario-colour-icon-black;
}

.ontario-icon--white svg {
	stroke: colours.$ontario-colour-icon-white;
	fill: colours.$ontario-colour-icon-white;
}

.ontario-icon--white svg {
	stroke: colours.$ontario-colour-white;
	fill: colours.$ontario-colour-white;
}