/* Buttons
--------------------------------------------- */

.wp-block-button .has-black-background-color,
.wp-block-button .has-nevada-background-color {
	color: var(--wp--preset--color--white);
}

.wp-block-button .wp-block-button__link.has-black-background-color:hover {
	border-color: var(--wp--preset--color--black) !important;
}

.has-black-background-color
	.wp-block-button
	.wp-block-button__link.has-black-background-color:hover {
	border-color: var(--wp--preset--color--emerald) !important;
}

.wp-block-button .wp-block-button__link.has-emerald-background-color:hover {
	background-color: var(--wp--preset--color--granny-smith-apple) !important;
	border-color: var(--wp--preset--color--emerald) !important;
}

.wp-block-button .wp-block-button__link.has-atomic-tangerine-background-color:hover {
	background-color: var(--wp--preset--color--dairy-cream) !important;
	border-color: var(--wp--preset--color--atomic-tangerine) !important;
}

.wp-block-button .wp-block-button__link.has-malibu-background-color:hover {
	background-color: var(--wp--preset--color--french-pass) !important;
	border-color: var(--wp--preset--color--malibu) !important;
}

.wp-block-button .wp-block-button__link.has-nevada-background-color:hover {
	background-color: var(--wp--preset--color--silver-sand) !important;
	border-color: var(--wp--preset--color--nevada) !important;
	color: var(--wp--preset--color--black);
}

.wp-block-button .wp-block-button__link.has-shocking-background-color:hover {
	background-color: var(--wp--preset--color--we-peep) !important;
	border-color: var(--wp--preset--color--shocking) !important;
}

.wp-block-button .wp-block-button__link.has-white-background-color:hover {
	border-color: var(--wp--preset--color--black) !important;
}

.wp-block-button .wp-block-button__link.has-black-background-color:hover {
	color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--white) !important;
}

.has-black-background-color
	.wp-block-button
	.wp-block-button__link.has-black-background-color:hover {
	background-color: var(--wp--preset--color--black) !important;
}

.wp-block-button
	.wp-block-button__link.has-white-background-color.has-border-color:hover {
	background-color: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--black) !important;
}

.wp-block-button
	.wp-block-button__link.has-white-background-color.has-emerald-border-color:hover {
	color: var(--wp--preset--color--emerald);
}

.wp-block-button
	.wp-block-button__link.has-white-background-color.has-atomic-tangerine-border-color:hover {
	color: var(--wp--preset--color--atomic-tangerine);
}

.wp-block-button
	.wp-block-button__link.has-white-background-color.has-malibu-border-color:hover {
	color: var(--wp--preset--color--malibu);
}

.wp-block-button
	.wp-block-button__link.has-white-background-color.has-nevada-border-color:hover {
	color: var(--wp--preset--color--nevada);
}

.wp-block-button
	.wp-block-button__link.has-white-background-color.has-shocking-border-color:hover {
	color: var(--wp--preset--color--shocking);
}

.wp-block-button
	.wp-block-button__link.has-white-background-color.has-black-border-color:hover {
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--black) !important;
	border-color: transparent;
}

.wp-block-button
	.wp-block-button__link.has-black-background-color.has-white-border-color:hover {
	color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--white) !important;
	border-color: transparent;
}

.wp-block-button .wp-block-button__link:hover {
	text-decoration: none;
}

.wp-block-button.is-style-link .wp-block-button__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	transition: text-decoration-thickness 0.3s ease;
}

body.has-no-blocks .wp-block-button.is-style-link .wp-block-button__link {
	background-color: transparent;
	border-radius: 0;
	border-width: 0px;
	border-style: none;
	color: var(--wp--preset--color--shark);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body);
	padding: 0;
	box-shadow: none;
}

/* Button Icons
--------------------------------------------- */

.wp-block-button[class*="has-icon__"] .wp-block-button__link {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.wp-block-button[class*="has-icon__"] .wp-block-button__link span {
	line-height: 0;
}

.wp-block-button[class*="has-icon__"] .wp-block-button__link svg {
	color: currentColor;
	fill: currentColor;
	height: var(--wp--preset--font-size--2-x-small);
	width: var(--wp--preset--font-size--2-x-small);
}

.wp-block-button.has-icon__arrow-right-thick .wp-block-button__link svg {
	height: var(--wp--preset--font-size--3-x-small);
	width: var(--wp--preset--font-size--3-x-small);
}

.wp-block-button[class*="has-icon__"] .wp-block-button__link.has-text-align-center {
	justify-content: center;
}

.wp-block-button[class*="has-icon__"] .wp-block-button__link.has-text-align-right {
	justify-content: flex-end;
}

.wp-block-button[class*="has-icon__"] .wp-block-button__link.has-text-align-left {
	justify-content: flex-start;
}

.wp-block-button[class*="has-icon__"].has-justified-space-between .wp-block-button__link {
	justify-content: space-between;
}

.wp-block-button[class*="has-icon__"].has-emerald-icon-color
	.wp-block-button__link-icon
	svg {
	fill: var(--wp--preset--color--emerald);
}

.wp-block-button[class*="has-icon__"].has-malibu-icon-color
	.wp-block-button__link-icon
	svg {
	fill: var(--wp--preset--color--malibu);
}

.wp-block-button[class*="has-icon__"].has-nevada-icon-color
	.wp-block-button__link-icon
	svg {
	fill: var(--wp--preset--color--nevada);
}

.wp-block-button[class*="has-icon__"].has-shocking-icon-color
	.wp-block-button__link-icon
	svg {
	fill: var(--wp--preset--color--shocking);
}

.wp-block-button[class*="has-icon__"].has-atomic-tangerine-icon-color
	.wp-block-button__link-icon
	svg {
	fill: var(--wp--preset--color--atomic-tangerine);
}

.wp-block-button[class*="has-icon__"].has-black-icon-color
	.wp-block-button__link-icon
	svg {
	fill: var(--wp--preset--color--black);
}

.wp-block-button[class*="has-icon__"].has-white-icon-color
	.wp-block-button__link-icon
	svg {
	fill: var(--wp--preset--color--white);
}

/* Gradient Outline
--------------------------------------------- */

/*
 * Emerald-to-malibu gradient outline, drawn as a masked pseudo-element so the
 * button keeps a solid fill instead of a flat border-color, with a 1px gray
 * hairline separating the gradient from the white fill. The gradient shifts
 * position and the button gains a soft emerald glow on hover/focus for a
 * clearer highlight, building on the Project Halo Figma spec.
 */
.wp-block-button.is-style-halo-gradient-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--white) !important;
	backdrop-filter: blur(var(--wp--custom--blur--control));
	border: 3px solid transparent;
	border-radius: var(--wp--custom--radius--control);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.04),
		0 8px 8px rgba(0, 0, 0, 0.03),
		inset 0 0 0 1px var(--wp--preset--color--silver-sand);
	color: var(--wp--preset--color--black) !important;
	position: relative;
	transition: box-shadow 0.3s ease;
}

.wp-block-button.is-style-halo-gradient-outline .wp-block-button__link:hover,
.wp-block-button.is-style-halo-gradient-outline .wp-block-button__link:focus-visible {
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.04),
		0 8px 8px rgba(0, 0, 0, 0.03),
		inset 0 0 0 1px var(--wp--preset--color--silver-sand),
		0 0 20px color-mix(in srgb, var(--wp--preset--color--emerald) 45%, transparent);
}

.wp-block-button.is-style-halo-gradient-outline .wp-block-button__link::before {
	background: linear-gradient(135deg, var(--wp--preset--color--emerald) 0%, var(--wp--preset--color--malibu) 100%);
	background-position: 0% 0%;
	background-size: 200% 200%;
	border-radius: inherit;
	content: "";

	/*
	 * The link's own 3px border is transparent (reserved purely to hold
	 * button-size/padding), so its background paints through it. Extend this
	 * pseudo-element out to the border's outer edge (inset:0 would otherwise
	 * sit inside it, at the padding edge) so the gradient ring covers that
	 * transparent border area instead of leaving the white fill visible.
	 */
	inset: -3px;
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	padding: 3px;
	pointer-events: none;
	position: absolute;
	transition: background-position 0.6s ease;
}

.wp-block-button.is-style-halo-gradient-outline .wp-block-button__link:hover::before,
.wp-block-button.is-style-halo-gradient-outline .wp-block-button__link:focus-visible::before {
	background-position: 100% 100%;
}

.wp-block-button.is-style-halo-gradient-outline .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--malibu);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-halo-gradient-outline .wp-block-button__link::before {
		transition: none;
	}
}

/* Close
--------------------------------------------- */

/*
 * An icon-only close control. The button's label is what assistive technology
 * announces, so it stays in the markup and is collapsed rather than removed;
 * the cross is drawn by masking the button itself.
 *
 * Emerald, matching the close control on the site's existing popups. Sized to
 * a 50px target so it stays comfortably tappable while the glyph reads at 24px.
 */
.wp-block-button.is-style-close .wp-block-button__link {
	background-clip: content-box;
	background-color: var(--wp--preset--color--emerald);
	border: 0;
	border-radius: 0;
	box-shadow: none;

	/*
	 * Sized from the glyph outward rather than to a fixed box, so padding
	 * grows the control and moves the cross away from whatever corner it is
	 * pinned to. A fixed box with border-box sizing would swallow the padding
	 * and leave the cross where it started.
	 */
	box-sizing: content-box;

	display: block;
	font-size: 0;
	height: 24px;
	line-height: 1;
	-webkit-mask: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/x-shape.svg") center / 24px 24px no-repeat;
	mask: url("/wp-content/client-mu-plugins/gtt-blocks/assets/svg/x-shape.svg") center / 24px 24px no-repeat;
	padding: var(--wp--preset--spacing--12);
	width: 24px;
}

.wp-block-button.is-style-close .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--granny-smith-apple) !important;
	border: 0 !important;
}

.wp-block-button.is-style-close .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--emerald);
	outline-offset: -4px;
}