/*
 * Layer: components. Button variations beyond the primary (components.css): glass, light and
 * text-link (kit .nd-btn--glass, .nd-btn--light, .nd-cta), plus the sliding arrow (.nd-arrow).
 * Hover transforms are reset under reduced motion in motion.css; the shimmer lives there too.
 */
@layer components {

	/*
	 * Glass (kit .nd-btn--glass), M15 recipe shared with the menu's Sign in: a thin paper tint over
	 * a strong blur, so the art behind shows as soft colour; denser fill without backdrop-filter.
	 * Nothing above a glass button may animate (L110) or the blur sees nothing.
	 */
	.wp-block-button.is-style-glass .wp-block-button__link {
		border-color: var(--wp--preset--color--glass-border);
		background-color: var(--wp--custom--glass--button-clear);
		color: var(--wp--preset--color--ink);
		-webkit-backdrop-filter: var(--wp--custom--blur--button);
		backdrop-filter: var(--wp--custom--blur--button);
	}

	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.wp-block-button.is-style-glass .wp-block-button__link {
			background-color: color-mix(in srgb, var(--wp--preset--color--paper) 85%, transparent);
		}
	}

	.wp-block-button.is-style-glass .wp-block-button__link:is(:hover, :focus-visible) {
		background-color: var(--wp--custom--glass--bg-strong);
		color: var(--wp--preset--color--ink);
	}

	.wp-block-button.is-style-glass .wp-block-button__link:hover {
		box-shadow: var(--wp--preset--shadow--lift-soft);
	}

	/* Light (kit .nd-btn--light): white on the deep surface; the shimmer sits in ::before. */
	.wp-block-button.is-style-light .wp-block-button__link,
	.nd-news .nd-news__submit {
		position: relative;
		overflow: hidden;
		background-color: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--cobalt);
	}

	.wp-block-button.is-style-light .wp-block-button__link:is(:hover, :focus-visible),
	.nd-news .nd-news__submit:is(:hover, :focus-visible) {
		background-color: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--cobalt);
	}

	.wp-block-button.is-style-light .wp-block-button__link:hover,
	.nd-news .nd-news__submit:hover {
		box-shadow: 0 18px 30px -14px color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
	}

	.wp-block-button.is-style-light .wp-block-button__link::before,
	.nd-news .nd-news__submit::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--wp--preset--color--brand) 25%, transparent) 50%, transparent 70%);
		background-size: 250% 100%;
		pointer-events: none;
	}

	/* Text link (kit .nd-cta): a call to action never smaller than the copy above it. */
	.wp-block-button.is-style-text-link .wp-block-button__link {
		min-height: 0;
		gap: 10px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: var(--wp--preset--color--brand-deep);
		font-size: var(--wp--preset--font-size--cta);
		font-weight: 600;
		transform-origin: left center;
		transition:
			transform var(--wp--custom--duration--base) var(--wp--custom--ease),
			color var(--wp--custom--duration--fast);
	}

	.wp-block-button.is-style-text-link .wp-block-button__link:is(:hover, :focus-visible) {
		background: none;
		color: var(--wp--preset--color--brand-deep);
		box-shadow: none;
		transform: scale(1.08);
	}

	.wp-block-button.is-style-text-link .wp-block-button__link:focus-visible {
		border-radius: var(--wp--preset--border-radius--input-glass);
		box-shadow: var(--wp--custom--focus-ring);
	}

	/* Kit .nd-cta--ink. */
	.wp-block-button.is-style-text-link.nd-cta--ink .wp-block-button__link,
	.wp-block-button.is-style-text-link.nd-cta--ink .wp-block-button__link:is(:hover, :focus-visible) {
		color: var(--wp--preset--color--ink);
	}

	/* Arrow: slides right once on hover and eases back. */
	.nd-arrow {
		display: inline-block;
		transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease);
	}

	:is(.wp-element-button, .wp-block-button__link):is(:hover, :focus-visible) .nd-arrow,
	.is-style-glass-island:hover .nd-arrow {
		transform: translateX(8px);
	}
}