/**
 * Editor and frontend styles for the Icon Block.
 */

/* Icon Block styles. */
.wp-block-icon {
	line-height: 0;

	&.aligncenter {
		display: flex;
		justify-content: center;
	}

	svg {
		box-sizing: border-box;
		fill: currentColor;

		&.is-flip-horizontal {
			transform: scaleX(-1);
		}

		&.is-flip-vertical {
			transform: scaleY(-1);
		}

		&.is-flip-horizontal.is-flip-vertical {
			transform: scaleX(-1) scaleY(-1);
		}
	}
}

// Use :where() so these defaults have zero specificity and can be overridden
// by global styles, which target `.wp-block-icon svg` at higher specificity.
:where(.wp-block-icon) svg {
	width: 100%;
	height: 100%;

	// Maintain stroke-width: neutralize `vector-effect="non-scaling-stroke"` on
	// shape elements so stroked icons continue to scale their strokes with the
	// icon size, preserving existing visual behavior.
	:where(path, rect, circle, ellipse, line, polygon, polyline) {
		vector-effect: none;
	}
}