/*
 * Button atoms for Pure Salmon.
 *
 * Two registered styles: "Salmon" (filled pill, brand primary) and "Outline"
 * (transparent with white border, designed for dark backgrounds). Unstyled
 * buttons also render as Salmon so first-insert looks correct without the
 * editor having to pick a style.
 *
 * A light/dark "Outline" variant can be added later if a non-dark surface
 * needs an outline style.
 */

/*
 * Display rules: outside of core/buttons block context the wp-block-button
 * wrapper has no default display and the link is plain inline — padding
 * paints visually but doesn't expand the box, so flex parents collapse the
 * row height. Forcing inline-flex on both makes them render as proper
 * pill-shaped boxes regardless of parent.
 */
.wp-block-button {
	display: inline-flex;
}

.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-salmon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--salmon);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	padding-block: 0.75rem;
	padding-inline: 1.75rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition:
		background-color 150ms ease,
		color 150ms ease,
		border-color 150ms ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button.is-style-salmon .wp-block-button__link:hover {
	background-color: hsl(359 100% 60%);
	color: var(--wp--preset--color--white);
}

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

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: hsl(0 0% 100% / 0.1);
	color: var(--wp--preset--color--white);
}

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