/**
 * 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%;
}