/**
 * core/button — the design system Button component.
 *
 * theme.json owns the default look (Primary, size M) under styles.elements.button,
 * and the Secondary / Ghost colours live in styles/blocks/button-*.json, so all
 * of those can be changed from Styles in the Site Editor. This file adds what
 * theme.json cannot express: sizes, the chevron icon, and the hover / active /
 * disabled / loading states of the non-default variants.
 *
 * Classes are set from the block sidebar ("Size & chevron" panel):
 *   is-size-sm | is-size-lg                (M is the default, no class)
 *   has-icon icon-position-start|end       (chevron left / right)
 *   is-loading                              (spinner, not clickable)
 * Set `--icon: url(...)` on the block to swap the chevron for another icon.
 */

.wp-block-button {
	--pw-icon-size: var(--wp--custom--icon-size--md);

	& .wp-block-button__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--wp--custom--spacing--comp-x-sm);
		box-sizing: border-box;
		white-space: nowrap;

		@media not (prefers-reduced-motion: reduce) {
			transition:
				background-color var(--wp--custom--motion--duration-fast) ease,
				border-color var(--wp--custom--motion--duration-fast) ease,
				color var(--wp--custom--motion--duration-fast) ease;
		}
	}

	/* Full-width buttons (Width 100% in the sidebar) still centre their label. */
	&.has-custom-width .wp-block-button__link {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Sizes
 * ---------------------------------------------------------------------- */
/* Pill buttons (2026 refresh): S 6/14 14px · M 12/22 16px · L 14/28 16px, all fully rounded. */
.wp-block-button.is-size-sm {
	--pw-icon-size: var(--wp--custom--icon-size--sm);

	& .wp-block-button__link {
		padding: var(--wp--custom--spacing--comp-y-sm) 14px;
		border-radius: var(--wp--custom--radius--pill);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.28571;
	}
}

.wp-block-button.is-size-lg .wp-block-button__link {
	padding: 14px 28px;
	border-radius: var(--wp--custom--radius--pill);
}

/* -------------------------------------------------------------------------
 * Variants — states. Base colours are in theme.json / styles/blocks.
 * ---------------------------------------------------------------------- */
.wp-block-button:is(.is-style-secondary, .is-style-outline, .is-style-outline-primary) .wp-block-button__link {
	&:hover {
		background-color: var(--wp--custom--color--button-secondary-hover);
		border-color: var(--wp--custom--color--button-secondary-hover);
		color: var(--wp--preset--color--text-inverse);
	}

	&:active {
		background-color: var(--wp--custom--color--button-secondary-active);
		border-color: var(--wp--custom--color--button-secondary-active);
	}
}

.wp-block-button:is(.is-style-ghost, .is-style-link) .wp-block-button__link {
	&:hover {
		background-color: var(--wp--preset--color--surface-natural);
		border-color: transparent;
		color: var(--wp--preset--color--text-secondary);
	}

	&:active {
		background-color: var(--wp--preset--color--surface-bold);
	}
}

.wp-block-button.is-style-light .wp-block-button__link {
	&:hover {
		background-color: var(--wp--preset--color--surface-natural);
		border-color: transparent;
		color: var(--wp--preset--color--text-primary);
	}

	&:active {
		background-color: var(--wp--preset--color--surface-bold);
	}
}

/*
 * V1 style names kept for existing content: "Outline" renders as Secondary
 * and "Link" as Ghost. They are not offered in the editor any more.
 */
.wp-block-button:is(.is-style-outline, .is-style-outline-primary) .wp-block-button__link {
	background-color: var(--wp--preset--color--surface-inverse);
	border: 1px solid var(--wp--custom--color--button-secondary-border);
	color: var(--wp--preset--color--text-inverse);
}

.wp-block-button.is-style-link .wp-block-button__link {
	background-color: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--text-secondary);
}

/* -------------------------------------------------------------------------
 * Disabled — a link button can't be [disabled]; use aria-disabled or the
 * is-disabled class.
 * ---------------------------------------------------------------------- */
.wp-block-button :is(.wp-block-button__link[aria-disabled="true"], .wp-block-button__link[disabled]),
.wp-block-button.is-disabled .wp-block-button__link {
	background-color: var(--button-color-bg-primary-disabled) !important;
	border-color: var(--button-color-bg-primary-disabled) !important;
	color: var(--wp--preset--color--text-disabled) !important;
	cursor: not-allowed;
	pointer-events: none;
}

.wp-block-button:is(.is-style-ghost, .is-style-link).is-disabled .wp-block-button__link {
	background-color: transparent !important;
	border-color: transparent !important;
}

/* -------------------------------------------------------------------------
 * Arrow / chevron icon — one pseudo-element, so a button has an icon on the leading
 * OR the trailing edge, never both.
 * ---------------------------------------------------------------------- */
.wp-block-button.has-icon .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	order: 1;
	width: var(--pw-icon-size);
	height: var(--pw-icon-size);
	margin-inline: -4px;
	background-color: currentColor;
	mask: var(--icon, url("../../../icons/arrow-right.svg")) center / contain no-repeat;

	@media not (prefers-reduced-motion: reduce) {
		transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--transition-spring-smooth);
	}
}

.wp-block-button.has-icon.icon-circle .wp-block-button__link::before {
	mask-image: var(--icon, url("../../../icons/caret-circle-right.svg"));
}

.wp-block-button.has-icon.icon-position-start .wp-block-button__link::before {
	order: -1;
	mask-image: var(--icon, url("../../../icons/chevron-left.svg"));
}

@media (hover: hover) {
	.wp-block-button.has-icon.icon-position-end:hover .wp-block-button__link::before {
		transform: translateX(3px);
	}

	.wp-block-button.has-icon.icon-position-start:hover .wp-block-button__link::before {
		transform: translateX(-3px);
	}
}

/* Directional icons point the other way in right-to-left languages. */
[dir="rtl"] .wp-block-button.has-icon .wp-block-button__link::before {
	scale: -1 1;
}

/* -------------------------------------------------------------------------
 * Loading
 * ---------------------------------------------------------------------- */
.wp-block-button.is-loading .wp-block-button__link {
	pointer-events: none;

	&::after {
		content: "";
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		border: 2px solid currentColor;
		border-top-color: transparent;
		border-radius: 50%;
		animation: pw-button-spin 0.6s linear infinite;
	}

	/* The spinner replaces the chevron. */
	&::before {
		display: none;
	}
}

@keyframes pw-button-spin {
	to {
		rotate: 360deg;
	}
}