// This variable is repeated across Button, Buttons, and Buttons editor styles.
$blocks-block__margin: 0.5em;

// Prefer the link selector instead of the regular button classname
// to support the previous markup in addition to the new one.
.wp-block-button__link {
	cursor: pointer;
	display: inline-block;
	text-align: center;
	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
	box-sizing: border-box;
	height: 100%;
	align-content: center;

	&.aligncenter {
		text-align: center;
	}

	&.alignright {
		/*rtl:ignore*/
		text-align: right;
	}
}

// These rules are set to zero specificity to keep the default styles for buttons.
// They are needed for backwards compatibility.
:where(.wp-block-button__link) {
	// This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
	box-shadow: none;
	text-decoration: none;

	// 100% causes an oval, but any explicit but really high value retains the pill shape.
	border-radius: 9999px;

	// The extra 2px are added to size solids the same as the outline versions.
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

.wp-block-button[style*="text-decoration"] .wp-block-button__link {
	text-decoration: inherit;
}

// Increased specificity needed to override margins.
.wp-block-buttons > .wp-block-button {
	&.has-custom-width {
		max-width: none;
		.wp-block-button__link {
			width: 100%;
		}
	}

	&.has-custom-font-size {
		.wp-block-button__link {
			font-size: inherit;
		}
	}

	&[class*="wp-block-button__width"] {
		width:
			calc(var(--wp--block-button--width) * 1% -
			(
				var(--wp--style--block-gap, #{$blocks-block__margin}) *
				( 1 - var(--wp--block-button--width) / 100 )
			));
	}

	// Legacy width classes for backwards compatibility.
	&.wp-block-button__width-25 {
		width:
			calc(25% -
			(
				var(--wp--style--block-gap, #{$blocks-block__margin}) *
				0.75
			));
	}

	&.wp-block-button__width-50 {
		width:
			calc(50% -
			(
				var(--wp--style--block-gap, #{$blocks-block__margin}) *
				0.5
			));
	}

	&.wp-block-button__width-75 {
		width:
			calc(75% -
			(
				var(--wp--style--block-gap, #{$blocks-block__margin}) *
				0.25
			));
	}

	&.wp-block-button__width-100 {
		width: 100%;
		flex-basis: 100%;
	}
}

// For vertical buttons, gap is not factored into width calculations.
.wp-block-buttons.is-vertical > .wp-block-button {
	&[class*="wp-block-button__width"] {
		width: calc(var(--wp--block-button--width) * 1%);
	}

	// Legacy width classes for backwards compatibility.
	&.wp-block-button__width-25 {
		width: 25%;
	}

	&.wp-block-button__width-50 {
		width: 50%;
	}

	&.wp-block-button__width-75 {
		width: 75%;
	}
}

// The follow block style selectors are required for old buttons markup
// and do not use the `:root :where()` format to match specificity at
// the time they were deprecated.
.wp-block-button.is-style-squared,
.wp-block-button__link.wp-block-button.is-style-squared {
	border-radius: 0;
}
.wp-block-button.no-border-radius,
.wp-block-button__link.no-border-radius {
	border-radius: 0 !important;
}

// Selectors here use the `:root :where()` format for maintaining compatibility
// with global styles and nested block style variations.
:root {
	// Outline Block Style Variation.
	:where(.wp-block-button.is-style-outline > .wp-block-button__link),
	:where(.wp-block-button .wp-block-button__link.is-style-outline) {
		border: 2px solid currentColor;
		padding: 0.667em 1.333em;
	}

	:where(
	.wp-block-button.is-style-outline
	> .wp-block-button__link:not(.has-text-color)
),
	:where(
	.wp-block-button
	.wp-block-button__link.is-style-outline:not(.has-text-color)
) {
		color: currentColor;
	}

	:where(
	.wp-block-button.is-style-outline
	> .wp-block-button__link:not(.has-background)
),
	:where(
	.wp-block-button
	.wp-block-button__link.is-style-outline:not(.has-background)
) {
		background-color: transparent;
		// background-image is required to overwrite a gradient background
		background-image: none;
	}
}