/*
 * The standalone icon block's wrapper.
 *
 * Only the wrapper: what is inside comes from whichever source the author picked
 * and is styled by that source's own sheet (assets/symbol/symbol.css or
 * assets/svg/svg.css). This file therefore has to work for both, and says nothing
 * about the icon itself.
 */

/*
 * Block-level, and that is load-bearing rather than tidy. A constrained layout
 * centres its children with `margin-inline: auto`, and auto margins do NOTHING on
 * an inline-block — which is how the gauge once ended up pinned to the left edge of
 * an `alignfull` content area while every paragraph sat 200px further in
 * (docs/core/gauge.md → Gotchas).
 */
.mf-icon-block {
	display: block;
}

/*
 * Placement is `text-align` on a block-level wrapper, not WordPress' `align`
 * support: `alignleft` and friends mean float and clearance on a block theme, while
 * a lone icon only ever wants to sit at one end of its own line. Same decision as
 * the symbol block's.
 */
.mf-icon-block--left {
	text-align: left;
}

.mf-icon-block--center {
	text-align: center;
}

.mf-icon-block--right {
	text-align: right;
}

/*
 * ---------------------------------------------------------------------------
 * The icon as a link (divb-hq#46).
 * ---------------------------------------------------------------------------
 *
 * `inline-flex` rather than `inline-block`: the anchor holds the icon plus its
 * off-screen name, and a flex line keeps the absolutely-positioned name from
 * adding a stray text baseline under the icon. The wrapper above still does the
 * placement — this box only has to be no larger than the icon it holds.
 *
 * The colour is deliberately NOT reset to `inherit`: a symbol icon is drawn in the
 * anchor's colour, and a theme's link colour is a deliberate signal that the thing
 * is clickable. What is reset is the underline, which would sit under the glyph
 * rather than under anything readable.
 */
.mf-icon-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: opacity 150ms ease, transform 150ms ease;
}

/*
 * As a button it needs to answer the pointer. Opacity plus a hair of lift works
 * for all three sources without knowing anything about them — a gradient tile, a
 * multicolour drawing and a font glyph have no colour token in common.
 */
.mf-icon-link:hover {
	opacity: 0.8;
	transform: translateY(-1px);
}

/*
 * Focus visibility is not optional. `currentColor` because this element has no
 * palette of its own and the theme's link colour is the one thing guaranteed to
 * contrast with the surface the author put the icon on.
 */
.mf-icon-link:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.mf-icon-link {
		transition: none;
	}

	.mf-icon-link:hover {
		transform: none;
	}
}

/*
 * The accessible name, off screen.
 *
 * Our own rule rather than the theme's `.screen-reader-text`: that class belongs
 * to whichever theme is active, and a link whose only name disappears with the
 * theme is a link with no name at all. Same reasoning as the admin pill's
 * `.mffb-bubble__sr`.
 */
.mf-icon-link__name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}