# ghostkit/3.3.3/gutenberg/blocks/icon/styles/style.scss

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.3.3. 35 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.3/code/gutenberg/blocks/icon/styles/style.scss
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.3/raw/gutenberg/blocks/icon/styles/style.scss
- Modified: 2024-02-18T18:40:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.3.3/code/gutenberg/blocks/icon/styles/style.scss#L10-L20`.

```scss
/**
 * Frontend Styles
 */
@import "./variables";

.ghostkit-icon {
	display: grid;

	svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	// Rotate
	&-flip-vertical svg {
		transform: scaleY(-1);
	}

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

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

.ghostkit-icon-inner {
	justify-self: var(--gkt-icon__justify);
	width: var(--gkt-icon__width);
	color: var(--gkt-icon__color);
	background: var(--gkt-icon__background);
}

```