/**
 * Polish layer, module "faq" (docs.ia/build/polish-design.md §16.2, design
 * §8.4). FAQ states and open and close. Matches baseline rule weight so no
 * !important is needed. Needs the base module (tokens).
 */

.precoin-faq details.wp-block-details summary::before {
	transition: background-color var(--precoin-t-2) var(--precoin-ease-out), box-shadow var(--precoin-t-2) var(--precoin-ease-out), scale var(--precoin-t-press) var(--precoin-ease-out);
}
.precoin-faq details.wp-block-details:not([open]) summary:hover::before,
.precoin-faq details.wp-block-details:not([open]) summary:focus-visible::before {
	box-shadow: inset 0 0 0 999px var(--precoin-ink-06);
}
.precoin-faq details.wp-block-details summary:active::before {
	scale: .94;
}
/* Plus-to-minus as two mask layers (vertical bar shrinks to 0) so it morphs
   instead of jumping; end state keeps rotate/translate none (K12). */
.precoin-faq details.wp-block-details summary::after {
	-webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
	mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
	-webkit-mask-repeat: no-repeat, no-repeat;
	mask-repeat: no-repeat, no-repeat;
	-webkit-mask-position: center, center;
	mask-position: center, center;
	-webkit-mask-size: 18px 2px, 2px 18px;
	mask-size: 18px 2px, 2px 18px;
	transition: mask-size var(--precoin-t-2) var(--precoin-ease-out), -webkit-mask-size var(--precoin-t-2) var(--precoin-ease-out);
}
.precoin-faq details.wp-block-details[open] summary::after {
	/* Repeats mask-image: baseline's own [open] rule sets it too, same specificity. */
	-webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
	mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
	-webkit-mask-size: 18px 2px, 2px 0;
	mask-size: 18px 2px, 2px 0;
}

@media screen and (prefers-reduced-motion: no-preference) {
	/* Answer, scoped to the FAQ so it does not reach the article aside's own
	   <details> table of contents. */
	@keyframes precoin-faq-answer { from { opacity: 0; translate: 0 var(--precoin-shift-1); } }
	.precoin-faq details[open] > :not(summary) {
		animation: precoin-faq-answer var(--precoin-t-2) var(--precoin-ease-out);
	}
}