@use "sass:math";
@use "../../../010-settings/" as *;
@use "../../../010-settings/legacy-settings/legacy-settings_symbol" as *;
@use "../../../050-layout/basics" as *;


//== Icons
//
//## Icons are used to represent (and quickly identify) objects.

//** Standard filter for the outlined icons to be used if disabled (rendering them with a grey outline).
$il-standard-disabled-icon-filter: grayscale(100%);
//** Standard filter for the outlined icons to be used if disabled (rendering them with a grey outline).
$il-standard-outlined-disabled-icon-filter: contrast(0%);

.icon {
	display: inline-block;
	text-align: center;

	&.small {
		height: $il-icon-size-small;
		line-height: $il-icon-size-small;
	}
	&.medium {
		height: $il-icon-size-medium;
		line-height: $il-icon-size-medium;
	}
	&.large {
		height: $il-icon-size-large;
		line-height: $il-icon-size-large;
	}
	&.responsive {
		width: 100%;
		line-height: $il-icon-size-medium;
	}

	&.disabled {
		-webkit-filter: $il-standard-disabled-icon-filter; /* Safari 6.0 - 9.0 */
		filter: $il-standard-disabled-icon-filter;
	}

	@media screen and (max-width: $il-grid-float-breakpoint) {
		& {
			max-width: inherit; // so svg icons do not collapse to 0
		}
	}
}