/*
 * Block icons (ADR 0012, Phase 3).
 *
 * Renders a chosen glyph as a mask-image ::before/::after, painted with currentColor
 * so it tracks the host element's text colour. Driven by the --{prefix} /
 * --{prefix}-size custom properties set on the block wrapper (added on save for static
 * blocks, by render_block for dynamic ones, and mirrored in the editor canvas).
 * Enqueued front end + editor canvas via enqueue_block_assets.
 *
 * Targets: core/button (.ftm-button-icon), core/navigation-link +
 * core/navigation-submenu (.ftm-nav-icon), core/list (.ftm-list-icon, marker).
 */

/* shared glyph rendering — one rule, parameterised by custom property */
.wp-block-button.has-ftm-button-icon .wp-block-button__link::before,
.wp-block-button.has-ftm-button-icon .wp-block-button__link::after,
.wp-block-navigation-item.has-ftm-nav-icon .wp-block-navigation-item__content::before,
.wp-block-navigation-item.has-ftm-nav-icon .wp-block-navigation-item__content::after {
	content: "";
	display: inline-block;
	background-color: currentcolor;
	vertical-align: -0.125em;
	flex: none;
}

/* ------------------------------------------------------------------- core/button */

/* Each slot has its own property (--ftm-button-icon-start / -end); legacy
 * single-icon markup supplies --ftm-button-icon, kept working via the fallback. */
.wp-block-button.has-ftm-button-icon .wp-block-button__link::before,
.wp-block-button.has-ftm-button-icon .wp-block-button__link::after {
	width: var(--ftm-button-icon-size, 1em);
	height: var(--ftm-button-icon-size, 1em);
}

.wp-block-button.has-ftm-button-icon .wp-block-button__link::before {
	-webkit-mask: var(--ftm-button-icon-start, var(--ftm-button-icon)) no-repeat center / contain;
	mask: var(--ftm-button-icon-start, var(--ftm-button-icon)) no-repeat center / contain;
}

.wp-block-button.has-ftm-button-icon .wp-block-button__link::after {
	-webkit-mask: var(--ftm-button-icon-end, var(--ftm-button-icon)) no-repeat center / contain;
	mask: var(--ftm-button-icon-end, var(--ftm-button-icon)) no-repeat center / contain;
}

/* Only paint the pseudo(s) whose slot is set — both may be present at once. */
.wp-block-button.has-ftm-button-icon--start:not(.has-ftm-button-icon--end) .wp-block-button__link::after,
.wp-block-button.has-ftm-button-icon--end:not(.has-ftm-button-icon--start) .wp-block-button__link::before {
	content: none;
}

.wp-block-button.has-ftm-button-icon--start .wp-block-button__link::before {
	margin-inline-end: 0.5em;
}

.wp-block-button.has-ftm-button-icon--end .wp-block-button__link::after {
	margin-inline-start: 0.5em;
}

/* -------------------------------------------- core/navigation-link + -submenu */
.wp-block-navigation-item.has-ftm-nav-icon .wp-block-navigation-item__content::before,
.wp-block-navigation-item.has-ftm-nav-icon .wp-block-navigation-item__content::after {
	width: var(--ftm-nav-icon-size, 1em);
	height: var(--ftm-nav-icon-size, 1em);
}

.wp-block-navigation-item.has-ftm-nav-icon .wp-block-navigation-item__content::before {
	-webkit-mask: var(--ftm-nav-icon-start, var(--ftm-nav-icon)) no-repeat center / contain;
	mask: var(--ftm-nav-icon-start, var(--ftm-nav-icon)) no-repeat center / contain;
}

.wp-block-navigation-item.has-ftm-nav-icon .wp-block-navigation-item__content::after {
	-webkit-mask: var(--ftm-nav-icon-end, var(--ftm-nav-icon)) no-repeat center / contain;
	mask: var(--ftm-nav-icon-end, var(--ftm-nav-icon)) no-repeat center / contain;
}

.wp-block-navigation-item.has-ftm-nav-icon--start:not(.has-ftm-nav-icon--end) .wp-block-navigation-item__content::after,
.wp-block-navigation-item.has-ftm-nav-icon--end:not(.has-ftm-nav-icon--start) .wp-block-navigation-item__content::before {
	content: none;
}

.wp-block-navigation-item.has-ftm-nav-icon--start .wp-block-navigation-item__content::before {
	margin-inline-end: 0.4em;
}

.wp-block-navigation-item.has-ftm-nav-icon--end .wp-block-navigation-item__content::after {
	margin-inline-start: 0.4em;
}

/* --------------------------------------------------- core/list (icon bullet) */

/* The icon replaces the native marker on each direct list item; nested lists are
 * separate blocks and keep their own marker unless they opt in too. */
.wp-block-list.has-ftm-list-icon {
	list-style: none;
	padding-inline-start: 1.6em;
}

.wp-block-list.has-ftm-list-icon > li {
	position: relative;
}

.wp-block-list.has-ftm-list-icon > li::before {
	content: "";
	position: absolute;
	inset-inline-start: -1.6em;
	top: 0.15em;
	width: var(--ftm-list-icon-size, 1em);
	height: var(--ftm-list-icon-size, 1em);
	background-color: currentcolor;
	-webkit-mask: var(--ftm-list-icon) no-repeat center / contain;
	mask: var(--ftm-list-icon) no-repeat center / contain;
}