/**
 * N1 Icons block — front end and editor.
 *
 * Size, padding and radius come from CSS custom properties set on the
 * wrapper by the block, so no per-page styles are needed.
 */

.n1il-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	line-height: 0;
}

.n1il-icon--align-left {
	margin-left: 0;
	margin-right: auto;
}

.n1il-icon--align-center {
	margin-left: auto;
	margin-right: auto;
}

.n1il-icon--align-right {
	margin-left: auto;
	margin-right: 0;
}

.n1il-icon .n1il-icon__svg {
	display: block;
	flex: none;
	width: var(--n1il-icon-size, 48px);
	height: var(--n1il-icon-size, 48px);
	max-width: none;
	overflow: visible;
}

/* Background enabled: the icon sits centered inside a padded container. */
.n1il-icon--has-bg {
	padding: var(--n1il-icon-padding, 16px);
}

.n1il-icon--shape-rounded {
	border-radius: var(--n1il-icon-radius, 8px);
}

.n1il-icon--shape-circle {
	border-radius: 50%;
}