/*
 * Shared button finish: a very subtle bevel. theme.json owns colour, type,
 * spacing, radius and the depth (settings.custom.button.depth). Hover and press
 * change only light and shadow, never colour, position or size, so no state can
 * move the layout. Focus stays in theme.json, separate from decorative depth.
 */
:root {
	--pst-button-depth: var(--wp--custom--button--depth, 0.5);
	--pst-button-white: var(--wp--preset--color--base);
	--pst-button-ink: var(--wp--preset--color--contrast);

	/* The lowest layer darkens the face a little, so white text on the action
	   colour keeps 4.5:1 under the highlight. */
	--pst-button-rest-face: linear-gradient(color-mix(in srgb, var(--pst-button-ink) 6%, transparent), color-mix(in srgb, var(--pst-button-ink) 6%, transparent));
	--pst-button-hover-face: linear-gradient(color-mix(in srgb, var(--pst-button-ink) 8%, transparent), color-mix(in srgb, var(--pst-button-ink) 8%, transparent));

	--pst-button-rest-image: linear-gradient(165deg, color-mix(in srgb, var(--pst-button-white) calc(18% * var(--pst-button-depth)), transparent), transparent 50%, color-mix(in srgb, var(--pst-button-ink) calc(5% * var(--pst-button-depth)), transparent)), var(--pst-button-rest-face);
	--pst-button-hover-image: linear-gradient(165deg, color-mix(in srgb, var(--pst-button-white) calc(24% * var(--pst-button-depth)), transparent), transparent 50%, color-mix(in srgb, var(--pst-button-ink) calc(7% * var(--pst-button-depth)), transparent)), var(--pst-button-hover-face);
	--pst-button-press-image: linear-gradient(165deg, color-mix(in srgb, var(--pst-button-ink) calc(11% * var(--pst-button-depth)), transparent), transparent 58%, color-mix(in srgb, var(--pst-button-white) calc(13% * var(--pst-button-depth)), transparent)), var(--pst-button-hover-face);

	--pst-button-rest-shadow: 0 calc(2px * var(--pst-button-depth)) calc(4px * var(--pst-button-depth)) calc(-2px * var(--pst-button-depth)) color-mix(in srgb, var(--pst-button-ink) calc(18% * var(--pst-button-depth)), transparent), inset 0 calc(1px * var(--pst-button-depth)) 0 color-mix(in srgb, var(--pst-button-white) calc(40% * var(--pst-button-depth)), transparent), inset 0 calc(-1.5px * var(--pst-button-depth)) 0 color-mix(in srgb, var(--pst-button-ink) calc(15% * var(--pst-button-depth)), transparent);
	--pst-button-hover-shadow: 0 calc(5px * var(--pst-button-depth)) calc(12px * var(--pst-button-depth)) calc(-4px * var(--pst-button-depth)) color-mix(in srgb, var(--pst-button-ink) calc(28% * var(--pst-button-depth)), transparent), inset 0 calc(1px * var(--pst-button-depth)) 0 color-mix(in srgb, var(--pst-button-white) calc(56% * var(--pst-button-depth)), transparent), inset 0 calc(-1.5px * var(--pst-button-depth)) 0 color-mix(in srgb, var(--pst-button-ink) calc(19% * var(--pst-button-depth)), transparent);
	--pst-button-press-shadow: inset 0 calc(2px * var(--pst-button-depth)) calc(4px * var(--pst-button-depth)) color-mix(in srgb, var(--pst-button-ink) calc(22% * var(--pst-button-depth)), transparent), inset 0 calc(1px * var(--pst-button-depth)) 0 color-mix(in srgb, var(--pst-button-ink) calc(12% * var(--pst-button-depth)), transparent), inset 0 calc(-1px * var(--pst-button-depth)) 0 color-mix(in srgb, var(--pst-button-white) calc(42% * var(--pst-button-depth)), transparent);
}

/* Outlined buttons have a clear face: a shallower bevel and a wash of their own
   text colour. */
:where(.is-style-ghost, .is-style-outline, .pst-download-store, .pst-comments__action--more, .wp-block-pst-ai-prompt) {
	--pst-button-rest-image: linear-gradient(color-mix(in srgb, currentColor 3%, transparent), color-mix(in srgb, currentColor 3%, transparent)), linear-gradient(165deg, rgb(255 255 255 / calc(0.12 * var(--pst-button-depth))), transparent 50%, rgb(22 24 29 / calc(0.025 * var(--pst-button-depth))));
	--pst-button-hover-image: linear-gradient(color-mix(in srgb, currentColor 7%, transparent), color-mix(in srgb, currentColor 7%, transparent)), linear-gradient(165deg, rgb(255 255 255 / calc(0.2 * var(--pst-button-depth))), transparent 50%, rgb(22 24 29 / calc(0.04 * var(--pst-button-depth))));
	--pst-button-press-image: linear-gradient(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 12%, transparent)), linear-gradient(165deg, rgb(22 24 29 / calc(0.07 * var(--pst-button-depth))), transparent 58%, rgb(255 255 255 / calc(0.12 * var(--pst-button-depth))));
	--pst-button-rest-shadow: 0 calc(2px * var(--pst-button-depth)) calc(4px * var(--pst-button-depth)) calc(-2px * var(--pst-button-depth)) rgb(22 24 29 / calc(0.14 * var(--pst-button-depth))), inset 0 calc(1px * var(--pst-button-depth)) 0 rgb(255 255 255 / calc(0.75 * var(--pst-button-depth))), inset 0 calc(-1px * var(--pst-button-depth)) 0 rgb(22 24 29 / calc(0.12 * var(--pst-button-depth)));
	--pst-button-hover-shadow: 0 calc(4px * var(--pst-button-depth)) calc(9px * var(--pst-button-depth)) calc(-4px * var(--pst-button-depth)) rgb(22 24 29 / calc(0.24 * var(--pst-button-depth))), inset 0 calc(1px * var(--pst-button-depth)) 0 rgb(255 255 255 / calc(0.9 * var(--pst-button-depth))), inset 0 calc(-1px * var(--pst-button-depth)) 0 rgb(22 24 29 / calc(0.16 * var(--pst-button-depth)));
	--pst-button-press-shadow: inset 0 calc(1.5px * var(--pst-button-depth)) calc(2px * var(--pst-button-depth)) rgb(22 24 29 / calc(0.12 * var(--pst-button-depth))), inset 0 calc(-1px * var(--pst-button-depth)) 0 rgb(255 255 255 / calc(0.65 * var(--pst-button-depth)));
}

/* Search icons and text-style links have no button surface to bevel. */
.wp-element-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .wp-block-search__button, .is-style-text-link *, .is-style-pst-card-link *)) {
	--pst-button-image: var(--pst-button-rest-image);
	--pst-button-shadow: var(--pst-button-rest-shadow);
	background-image: var(--pst-button-image);
	box-shadow: var(--pst-button-shadow);
	transition: box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {

	.wp-element-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .wp-block-search__button, .is-style-text-link *, .is-style-pst-card-link *)):hover {
		--pst-button-image: var(--pst-button-hover-image);
		--pst-button-shadow: var(--pst-button-hover-shadow);
	}

	.is-style-ghost .wp-element-button:hover {
		border-color: var(--wp--preset--color--muted);
	}
}

.wp-element-button:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .wp-block-search__button, .is-style-text-link *, .is-style-pst-card-link *)):active {
	--pst-button-image: var(--pst-button-press-image);
	--pst-button-shadow: var(--pst-button-press-shadow);
	transition-duration: 80ms;
}

/* The download buttons set the background shorthand in their block sheet, which
   would clear the bevel. */
a.wp-element-button.pst-download-free,
.wp-block-button__link.wp-element-button.pst-download-store {
	background-image: var(--pst-button-image);
}

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

	.wp-element-button {
		transition: none;
	}
}