/* NLC icon block and nlc_icon() SVGs (inc/icons.php). Plain icons follow the text size;
   the copper circle and diamond match the live feature lists and timeline. */

.nlc-svg {
	display: block;
	width: 1em;
	height: 1em;
}

.nlc-icon {
	--nlc-icon-box: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: fit-content;
	font-size: 1.25rem;
	line-height: 1;
}

.nlc-icon.aligncenter {
	display: flex;
	margin-inline: auto;
}

.nlc-icon.is-style-circle,
.nlc-icon.is-style-diamond {
	inline-size: var(--nlc-icon-box);
	block-size: var(--nlc-icon-box);
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--copper);
}

.nlc-icon.is-style-circle {
	border-radius: 50%;
}

/* The square is turned, not the icon: the SVG sits inside a counter-rotated span. */
.nlc-icon.is-style-diamond {
	--nlc-icon-box: 2.25rem;
	font-size: 1rem;
	transform: rotate(45deg);
	border-radius: 3px;
}

.nlc-icon.is-style-diamond > .nlc-svg,
.nlc-icon.is-style-diamond > .nlc-icon__preview {
	transform: rotate(-45deg);
}

/* Editor preview (blocks/icon/index.js): the SVG as a mask, so it takes the text colour. */
.nlc-icon__preview {
	display: block;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}