/**
 * Polish layer, module "controls" (docs.ia/build/polish-design.md §16.2,
 * design §8.1, §13 R2). Buttons, ghost, link-style, read-more, chips,
 * pagination, search focus, hit areas, the arrow filter (design §5.2), one
 * underline for each element (R2) for link-style buttons and read-more
 * links. Needs the base module (tokens).
 */

/* Base transition for every control below. */
.wp-block-button:not(.is-style-ghost):not(.is-style-link) > .wp-block-button__link,
.wp-block-button__link.has-background,
.wp-block-button.is-style-ghost > .wp-block-button__link,
.wp-block-button.is-style-link > .wp-block-button__link,
a.wp-block-read-more:not(.precoin-cta-pill),
a.wp-block-read-more.precoin-cta-pill,
.wp-block-tag-cloud a,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	transition-property: background-color, color, border-color, box-shadow, translate, scale, background-size;
	transition-duration: var(--precoin-t-2);
	transition-timing-function: var(--precoin-ease-out);
}

/* Primary button: theme.json's accent-deep fill stays; only the lift is new. */
@media (hover: hover) {
	.wp-block-button:not(.is-style-ghost):not(.is-style-link) > .wp-block-button__link:hover {
		translate: 0 -1px;
		transition-duration: var(--precoin-t-1);
	}
}
.wp-block-button:not(.is-style-ghost):not(.is-style-link) > .wp-block-button__link:focus-visible {
	translate: 0 -1px;
	transition-duration: var(--precoin-t-1);
}
.wp-block-button:not(.is-style-ghost):not(.is-style-link) > .wp-block-button__link:active {
	scale: .98;
	translate: none;
	transition-duration: var(--precoin-t-press);
}

/* Locked fill (has-background): color/bg are locked on a has-* class (K36), so
   the state is a tint layer instead. */
.wp-block-button__link.has-background {
	position: relative;
	isolation: isolate;
}
.wp-block-button__link.has-background::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: -1;
	background: var(--precoin-ink-33);
	opacity: 0;
	transition: opacity var(--precoin-t-2) var(--precoin-ease-out);
}
.wp-block-button__link.has-background.has-ink-background-color::before {
	background: var(--precoin-on-dark-10);
}
@media (hover: hover) {
	.wp-block-button__link.has-background:hover::before {
		opacity: 1;
		transition-duration: var(--precoin-t-1);
	}
}
.wp-block-button__link.has-background:focus-visible::before {
	opacity: 1;
	transition-duration: var(--precoin-t-1);
}
.wp-block-button__link.has-background:active {
	scale: .98;
	transition-duration: var(--precoin-t-press);
}
.wp-block-button__link.has-background.has-ink-background-color:active::before {
	background: var(--precoin-on-dark-18);
	opacity: 1;
}

/* Ghost button. */
@media (hover: hover) {
	.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
		box-shadow: inset 0 0 0 999px var(--precoin-ink-06);
		transition-duration: var(--precoin-t-1);
	}
	.wp-block-button.is-style-ghost > .wp-block-button__link.has-on-dark-color:hover {
		box-shadow: inset 0 0 0 999px var(--precoin-on-dark-10);
	}
}
.wp-block-button.is-style-ghost > .wp-block-button__link:focus-visible {
	box-shadow: inset 0 0 0 999px var(--precoin-ink-06);
	transition-duration: var(--precoin-t-1);
}
.wp-block-button.is-style-ghost > .wp-block-button__link.has-on-dark-color:focus-visible {
	box-shadow: inset 0 0 0 999px var(--precoin-on-dark-10);
}
.wp-block-button.is-style-ghost > .wp-block-button__link:active {
	scale: .98;
	box-shadow: inset 0 0 0 999px var(--precoin-ink-12);
	transition-duration: var(--precoin-t-press);
}
.wp-block-button.is-style-ghost > .wp-block-button__link.has-on-dark-color:active {
	box-shadow: inset 0 0 0 999px var(--precoin-on-dark-18);
}

/* Read-more pill: like a locked-fill button, but .precoin-cta-pill's bg is a
   theme.json class rule, not a has-* utility class. */
a.wp-block-read-more.precoin-cta-pill {
	position: relative;
	isolation: isolate;
}
a.wp-block-read-more.precoin-cta-pill::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: -1;
	background: var(--precoin-on-dark-10);
	opacity: 0;
	transition: opacity var(--precoin-t-2) var(--precoin-ease-out);
}
@media (hover: hover) {
	a.wp-block-read-more.precoin-cta-pill:hover::before {
		opacity: 1;
		transition-duration: var(--precoin-t-1);
	}
}
a.wp-block-read-more.precoin-cta-pill:focus-visible::before {
	opacity: 1;
	transition-duration: var(--precoin-t-1);
}
a.wp-block-read-more.precoin-cta-pill:active {
	scale: .98;
	transition-duration: var(--precoin-t-press);
}
a.wp-block-read-more.precoin-cta-pill:active::before {
	background: var(--precoin-on-dark-18);
	opacity: 1;
}

/* Chips: the background-alt fill of theme.json stays; the transition is new. */
.wp-block-tag-cloud a:active {
	scale: .98;
	transition-duration: var(--precoin-t-press);
}

/* Pagination. */
@media (hover: hover) {
	.wp-block-query-pagination .page-numbers:not(.current):hover,
	.wp-block-query-pagination-previous:hover,
	.wp-block-query-pagination-next:hover {
		box-shadow: inset 0 0 0 999px var(--precoin-ink-06);
		transition-duration: var(--precoin-t-1);
	}
}
.wp-block-query-pagination .page-numbers:not(.current):focus-visible,
.wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination-next:focus-visible {
	box-shadow: inset 0 0 0 999px var(--precoin-ink-06);
	transition-duration: var(--precoin-t-1);
}
.wp-block-query-pagination .page-numbers:not(.current):active,
.wp-block-query-pagination-previous:active,
.wp-block-query-pagination-next:active {
	scale: .98;
	transition-duration: var(--precoin-t-press);
}

/* Search field: today the field has no focus indicator. */
.wp-block-search__inside-wrapper:focus-within {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Text links in content. */
.wp-block-post-content a:not([class]),
.entry-content p > a {
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

/* Hit areas: box unchanged, only the hit-tested area grows. Targets: the menu
   button, the cookie close icon, link-style buttons, category links. */
@media (pointer: coarse) {
	.wp-block-navigation__responsive-container-open,
	.cn-close-icon,
	.wp-block-button.is-style-link > .wp-block-button__link,
	a.wp-block-read-more:not(.precoin-cta-pill),
	.wp-block-tag-cloud a {
		position: relative;
	}
	.wp-block-navigation__responsive-container-open::after,
	.cn-close-icon::after,
	.wp-block-button.is-style-link > .wp-block-button__link::after,
	a.wp-block-read-more:not(.precoin-cta-pill)::after,
	.wp-block-tag-cloud a::after {
		content: "";
		position: absolute;
		inset: -10px;
	}
}

/* Arrow: the same duration both ways (brief: no separate hover/leave timing). */
.precoin-arrow {
	display: inline-block;
	transition: translate var(--precoin-t-2) var(--precoin-ease-out);
}
@media (hover: hover) {
	a:hover > .precoin-arrow {
		translate: 4px 0;
	}
	a:hover > .precoin-arrow.precoin-arrow--diagonal {
		translate: 2px -2px;
	}
}
a:focus-visible > .precoin-arrow {
	translate: 4px 0;
}
a:focus-visible > .precoin-arrow.precoin-arrow--diagonal {
	translate: 2px -2px;
}

/* R2: the animated line written once so text-decoration:none cannot separate
   from it (theme.json's a:hover sets native underline), for the link-style
   button and the plain read-more link. */
.wp-block-button.is-style-link > .wp-block-button__link,
a.wp-block-read-more:not(.precoin-cta-pill) {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--precoin-t-2) var(--precoin-ease-out);
}
@media (hover: hover) {
	.wp-block-button.is-style-link > .wp-block-button__link:hover,
	a.wp-block-read-more:not(.precoin-cta-pill):hover {
		background-size: 100% 1px;
		transition-duration: var(--precoin-t-1);
	}
}
.wp-block-button.is-style-link > .wp-block-button__link:focus-visible,
a.wp-block-read-more:not(.precoin-cta-pill):focus-visible {
	background-size: 100% 1px;
	transition-duration: var(--precoin-t-1);
}