/* Icon block (rogiq/icon). The wrapper is the icon's box; --rogiq-icon-size comes from
   the block's Size setting. Recoloured icons are a span masked by the image (its alpha
   is the shape) and filled with a palette colour or a two-stop palette gradient. */
.wp-block-rogiq-icon {
	box-sizing: content-box;
	width: var(--rogiq-icon-size, 56px);
	height: var(--rogiq-icon-size, 56px);
	line-height: 0;
}
.wp-block-rogiq-icon.aligncenter {
	margin-left: auto;
	margin-right: auto;
}
.wp-block-rogiq-icon > .rogiq-icon__media {
	display: block;
	width: var(--rogiq-icon-size, 56px);
	height: var(--rogiq-icon-size, 56px);
}
.wp-block-rogiq-icon > img.rogiq-icon__media {
	object-fit: contain;
	max-width: none;
}
.rogiq-icon__glyph {
	background: linear-gradient(var(--rogiq-icon-angle, 315deg), var(--rogiq-fill-from, currentColor) 0%, var(--rogiq-fill-to, var(--rogiq-fill-from, currentColor)) 100%);
	-webkit-mask-image: var(--rogiq-icon-mask);
	mask-image: var(--rogiq-icon-mask);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
/* Editor-only: empty placeholder box */
.rogiq-icon-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 1px dashed currentColor;
	opacity: 0.5;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
}