style.scss

// 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 {
	color: $white;
	background-color: #32373c;
	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
	font-size: 1.125em;
	padding: calc(0.667em + 2px) calc(1.333em + 2px); // The extra 2px are added to size solids the same as the outline versions.
	text-align: center;
	text-decoration: none;
	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;

	&:hover,
	&:focus,
	&:active,
	&:visited {
		color: $white;
	}

	&.aligncenter {
		text-align: center;
	}

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

// 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;
		}
	}

	&.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 {
	&.wp-block-button__width-25 {
		width: 25%;
	}

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

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

// the first selector is required for old buttons markup
.wp-block-button.is-style-squared,
.wp-block-button__link.wp-block-button.is-style-squared {
	border-radius: 0;
}


// the first selector is required for old buttons markup
.wp-block-button.no-border-radius,
.wp-block-button__link.no-border-radius {
	border-radius: 0 !important;
}

.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	border: 2px solid currentColor;
	padding: 0.667em 1.333em;
}

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

.is-style-outline > .wp-block-button__link:not(.has-background),
.wp-block-button__link.is-style-outline:not(.has-background) {
	background-color: transparent;
}