.block-editor-block-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;

	&.has-colors {
		svg {
			fill: currentColor;

			// Optimizate for high contrast modes.
			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
			@media (forced-colors: active) {
				fill: CanvasText;
			}
		}
	}

	// Icons with width/height attributes below 20px will be sized up to 20px,
	// and icons with width/height attributes above 24px will be sized down to
	// 24px. Icons with width/height >=20px and <=24px will display at the
	// indicated size.
	// See: https://github.com/WordPress/gutenberg/pull/9828
	svg {
		min-width: 20px;
		min-height: 20px;
		max-width: 24px;
		max-height: 24px;
	}
}
