/*
 * core/group — one icon that is a link (`is-style-icon-link`).
 *
 * Registered opt-in by `includes/styles/blocks/core-group-icon-link.php`. Two
 * of them make the contact row in a team card (18018-6888 and 18172-3220):
 *
 *   ┌────────────────┐
 *   │  ✉      ☎      │   two 16px glyphs, 16px apart
 *   └────────────────┘
 *
 * The group holds a `core/icon` and a `core/buttons`; the anchor inside the
 * button is stretched over the whole group, and its label is the link's
 * accessible name rather than something to read on screen. The PHP file explains
 * why the affordance is two blocks at all.
 *
 * ## The label is hidden by size, not by `display`
 *
 * `font-size: 0` on the anchor, and it has to be the anchor rather than a
 * wrapper: the label is the button's `text` attribute, which core renders as the
 * anchor's own text node with no element around it to hide. Everything that
 * removes an element from the page — `display: none`, `visibility: hidden`, the
 * `hidden` attribute — takes it out of the accessibility tree with it, which
 * would leave a link whose only name is the URL. Zero-sized text stays in the
 * tree and is what `<a>` computes its name from, so a screen reader still reads
 * "anders.hassel@nenda.com" while the page shows the envelope alone.
 *
 * The clip-rect idiom (`clip-path` + `position: absolute` + `1px` box) is the
 * usual spelling of this and is the wrong tool here: the anchor is *already*
 * absolutely positioned, because it is also the hit area, and clipping it to a
 * pixel would clip the thing being clicked.
 *
 * ## The hit area is bigger than the glyph, on purpose
 *
 * The design draws a 16px icon, and 16px is under every minimum-target
 * guideline there is. `inset: -0.25rem` grows the anchor to 24px in both axes
 * without moving a single pixel of ink, and the design's own 16px gap between
 * the two icons leaves 8px between the two targets — so they grow without ever
 * meeting. Growing the *group* instead would have been visible: it is a flex
 * item in the card, and a taller box moves the row.
 *
 * ## The icon takes the hover, because the anchor has nothing to show
 *
 * The link's own text is zero-sized, so every gesture a link normally makes —
 * an underline, a colour change on the label — lands on nothing. The glyph is
 * the only ink in the control, so it is what responds: the design's 40% black
 * goes to full `woodsmoke` on hover and on focus.
 *
 * That colour is stated here rather than left to the block's Text control on
 * purpose, and only for the *state*: the pattern sets the resting colour on the
 * Icon block where an editor can see it, and a state is the one thing no
 * inspector control can say.
 */

.wp-block-group.is-style-icon-link {
	/* The anchor is positioned against this box, so the group frames the hit area. */
	position: relative;
	display: flex;
	align-items: center;

	/*
	 * The group holds two children and draws one. `theme.json` gives every
	 * `core/group` a `lg` gap, so without this the structural `core/buttons`
	 * wrapper — a box with no size, because the anchor inside it is out of flow —
	 * would still push 24px of air out to the right of the glyph. `!important`
	 * is not needed: core writes `blockGap` as a `gap` on the block's own
	 * `:root :where(…)` rule, which contributes no specificity.
	 */
	gap: 0;
}

/*
 * `core/icon` renders a wrapper `<div>` around the `<svg>` its width control
 * sizes, and a flex item with no `flex` of its own is shrinkable — so a narrow
 * card would squeeze the glyph out of square before anything else gave way.
 */
.wp-block-group.is-style-icon-link .wp-block-icon {
	display: flex;
	flex: none;
}

.wp-block-group.is-style-icon-link .wp-block-button__link {
	/*
	 * The hit area: the glyph's box grown by 4px on every side, so a 16px icon
	 * is a 24px target. See the header for why this is not on the group.
	 */
	position: absolute;
	inset: -0.25rem;

	/*
	 * Core sizes a button inside `core/buttons` with `width: 100%`
	 * (`.wp-block-buttons .wp-block-button__link`, 0-2-0), and a width beside a
	 * left *and* a right is over-constrained — the anchor takes the group's own
	 * 16px and `inset`'s right edge is ignored, so the target is offset by 4px
	 * rather than grown by 8. Handing both axes back to `inset` is what makes
	 * the box 24px; this selector is 0-3-0, so it needs no `!important`.
	 */
	inline-size: auto;
	block-size: auto;

	/*
	 * Everything the button normally is, taken back off. `assets/css/blocks/button.css`
	 * is the theme's *default* button style and gives every button a 44px flex
	 * box with a fill and padding — correct for a control, and here it would be
	 * a blue rectangle over the icon. This is a class deeper than that file's
	 * selector, which is what lets it win without an `!important`.
	 */
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--none);
	background: none;

	/* The label is the accessible name and nothing else — see the header. */
	font-size: 0;
	line-height: 0;
}

/*
 * The default style's `currentColor` wash, switched off. `button.css` paints
 * every button's hover, focus and active state as a `::before` filled with
 * `currentcolor` at 12% — the only form that survives an editor picking a
 * palette background, and the right answer on a control. Over a 16px glyph it is
 * a grey square appearing behind the icon, which reads as a rendering fault.
 *
 * `content: none` and not `opacity: 0`: it removes the pseudo-element rather
 * than leaving a box that still participates. `background: none` on the link
 * above does not reach it, which is the trap `button-inline-link.css` documents
 * and `group-link-list.css` shipped anyway.
 */
.wp-block-group.is-style-icon-link .wp-block-button__link::before {
	content: none;
}

/*
 * The focus ring belongs to the target rather than to the glyph, so it traces
 * the 24px box a pointer can hit. theme.json's `elements.button` already draws
 * this ring; it is restated here because the offset it uses assumes a control
 * with padding, and 2px outside a box that is already 4px larger than the ink
 * puts the ring where the eye expects it.
 */
.wp-block-group.is-style-icon-link .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--woodsmoke);
	outline-offset: 0;
}

/*
 * The resting colour, and it is here rather than on the Icon block's own Text
 * control for a reason that is core's rather than a preference.
 *
 * The design draws these glyphs in Overlays/Solid/Black/40%, which this theme
 * has as `--wp--custom--overlay-black-40`. Neither half of that can go in the
 * block's attribute: a `var(--…)` in a block attribute does not survive being
 * saved (`serialize_block_attributes()` escapes the `--`), and the literal
 * `rgba(0, 0, 0, 0.4)` is **dropped by `safecss_filter_attr()`** — the sanitiser
 * `core/icon`'s render runs its inline style through allows `#101216` and
 * `currentColor` for `color` and refuses every functional notation, `rgba()` and
 * `rgb(… / …)` alike. The style engine reports the declaration in its
 * `declarations` array and omits it from the `css` string it actually writes, so
 * the attribute is in the markup, the inspector shows the swatch, the `svg`
 * carries `has-text-color`, and the colour on screen is the body's. Nothing says
 * why.
 *
 * So a translucent icon colour is only expressible in CSS, and this is the file
 * that owns these icons. An editor is not locked out by it: a palette swatch
 * compiles to `.has-<slug>-color { color: … !important }` on the `svg` and a
 * custom hex to an inline style, and both beat this rule.
 */
.wp-block-group.is-style-icon-link .wp-block-icon svg {
	color: var(--wp--custom--overlay-black-40);
}

/*
 * The glyph is the only ink, so the glyph is the state. One class deeper than
 * the resting rule above, and deeper than the block-supports rule a picked
 * colour compiles to, so hover survives an editor changing the resting colour.
 */
.wp-block-group.is-style-icon-link:focus-within .wp-block-icon svg {
	color: var(--wp--preset--color--woodsmoke);
}

@media (hover: hover) {
	/* Guarded, so a tap does not leave the last icon darkened on a phone. */
	.wp-block-group.is-style-icon-link:hover .wp-block-icon svg {
		color: var(--wp--preset--color--woodsmoke);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-group.is-style-icon-link .wp-block-icon svg {
		transition: color 0.2s var(--wp--custom--transition-spring-smooth);
	}
}