/* ==========================================================================
   Button block style variations
   Selectors follow the FSE pattern:
   .wp-block-button.is-style-{name} .wp-block-button__link
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Shared base styles — applied to all button types
   --------------------------------------------------------------------------- */

.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-primary-small .wp-block-button__link,
.wp-block-button.is-style-primary-large .wp-block-button__link,
.wp-block-button.is-style-arrow .wp-block-button__link,
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-primary-accent .wp-block-button__link {
	display: flex;
	height: 40px;
	padding: 0 24px;
	justify-content: flex-start;
	align-items: center;
	transition: padding-right 0.3s ease;
	border-radius: 50px;
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
	border: none;
	text-decoration: none;
	outline: none;
}

/* Per-style base overrides — must precede the shared :hover/:has() rules below,
   since stylelint's no-descending-specificity expects lower-specificity
   selectors targeting the same element to come first */

.wp-block-button.is-style-arrow .wp-block-button__link {
	gap: 0;
	padding: 0 8px;
	font-size: 0;
	transition: padding-left 0.3s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: none;
	padding: 0 22px;
	color: var(--wp--preset--color--neutral-900);
	border: 2px solid var(--wp--preset--color--neutral-900);
}

.wp-block-button.is-style-primary-large .wp-block-button__link {
	height: 48px;
	font-size: 22px;
}

.wp-block-button.is-style-primary-accent .wp-block-button__link {
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--neutral-900);
}

/* primary-small & primary-large — compound button container with adjacent arrow circle.
   Must precede the compound :has() focus rule below for the same reason as above */

.wp-block-button.is-style-fill,
.wp-block-button.is-style-outline,
.wp-block-button.is-style-primary-small,
.wp-block-button.is-style-primary-large,
.wp-block-button.is-style-primary-accent {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* The [hidden] attribute is otherwise overridden by the display: inline-flex
   above, since both selectors have equal specificity and this one comes later. */
.wp-block-button.is-style-fill[hidden],
.wp-block-button.is-style-outline[hidden],
.wp-block-button.is-style-primary-small[hidden],
.wp-block-button.is-style-primary-large[hidden],
.wp-block-button.is-style-primary-accent[hidden] {
	display: none;
}

/* Shared hover — expand right padding only, text stays left-anchored */

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-primary-small .wp-block-button__link:hover,
.wp-block-button.is-style-primary-large .wp-block-button__link:hover,
.wp-block-button.is-style-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-primary-accent .wp-block-button__link:hover {
	padding-right: 32px;
}

/* TODO: active state — add :active ruleset once designs arrive */

/* Focus state — simple buttons (link only): outline on the link */

.wp-block-button.is-style-arrow .wp-block-button__link:focus-visible,
.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-grey);
	outline-offset: 2px;
	border-radius: 40px;
}

/* Focus state — compound buttons (pill + arrow circle): outline on the wrapper so both are enclosed */

.wp-block-button.is-style-fill:has(.wp-block-button__link:focus-visible),
.wp-block-button.is-style-outline:has(.wp-block-button__link:focus-visible),
.wp-block-button.is-style-primary-small:has(.wp-block-button__link:focus-visible),
.wp-block-button.is-style-primary-large:has(.wp-block-button__link:focus-visible),
.wp-block-button.is-style-primary-accent:has(.wp-block-button__link:focus-visible) {
	outline: 2px solid var(--wp--preset--color--neutral-grey);
	outline-offset: 2px;
	border-radius: 40px;
}

/* Shared disabled state */

.wp-block-button.is-style-fill .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-fill .wp-block-button__link.is-disabled,
.wp-block-button.is-style-outline .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-outline .wp-block-button__link.is-disabled,
.wp-block-button.is-style-primary-small .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-primary-small .wp-block-button__link.is-disabled,
.wp-block-button.is-style-primary-large .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-primary-large .wp-block-button__link.is-disabled,
.wp-block-button.is-style-arrow .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-arrow .wp-block-button__link.is-disabled,
.wp-block-button.is-style-secondary .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-secondary .wp-block-button__link.is-disabled,
.wp-block-button.is-style-primary-accent .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-primary-accent .wp-block-button__link.is-disabled {

	/* TODO: disabled state */
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Arrow — icon via ::after pseudo-element
   --------------------------------------------------------------------------- */

.wp-block-button.is-style-arrow .wp-block-button__link:hover {
	padding: 0 8px 0 48px; /* overrides shared padding-right: 32px */
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: '';
	display: inline-block;
	width: 26px;
	height: 23px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' fill='none' viewBox='0 0 26 23'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ---------------------------------------------------------------------------
   Per-style overrides — fill these in as designs arrive
   --------------------------------------------------------------------------- */

/* primary-small */

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-primary-small .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-primary-accent .wp-block-button__link:hover {
	padding: 0 56px 0 24px;
}

/* outline */

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	padding: 0 54px 0 22px;
}

/* secondary:     TODO */

.wp-block-button.is-style-fill::after,
.wp-block-button.is-style-outline::after,
.wp-block-button.is-style-primary-small::after,
.wp-block-button.is-style-primary-large::after {
	content: '';
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--neutral-900);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' fill='none' viewBox='0 0 26 23'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.wp-block-button.is-style-primary-accent::after {
	content: '';
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' fill='none' viewBox='0 0 26 23'%3E%3Cpath stroke='%232A2637' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%232A2637' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* outline arrow circle — transparent background, bordered, neutral-900 arrow */

.wp-block-button.is-style-outline::after {
	width: 38px;
	height: 36px;
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--neutral-900);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' fill='none' viewBox='0 0 26 23'%3E%3Cpath stroke='%232A2637' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%232A2637' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/svg%3E");
}

/* primary-large arrow circle — overrides the shared 40px after the shared rule */

.wp-block-button.is-style-primary-large::after {
	width: 48px;
	height: 48px;
}