.wp-block-button.wc-block-components-product-button {
	word-break: break-word;
	white-space: normal;

	.wc-block-components-product-button__button {
		border-style: none;
		display: inline-flex;
		justify-content: center;
		margin-right: auto;
		margin-left: auto;
		white-space: normal;
		word-break: break-word;
	}

	.wc-block-components-product-button__button--placeholder {
		@include placeholder();
		min-width: 8em;
		min-height: 3em;
	}

	.wc-block-all-products & {
		margin-bottom: $gap-small;
	}
}

.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button {
	@include placeholder();
	min-width: 8em;
	min-height: 3em;
}

.theme-twentytwentyone {
	// Prevent buttons appearing disabled in the editor.
	.editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link {
		background-color: var(--button--color-background);
		color: var(--button--color-text);
		border-color: var(--button--color-background);
	}
}

// Style: Fill & Outline
.wp-block-button.is-style-outline {
	.wp-block-button__link {
		border: 2px solid currentColor;

		&:not(.has-text-color) {
			color: currentColor;
		}

		&:not(.has-background) {
			background-color: transparent;
			background-image: none;
		}
	}
}

// Width setting
.wp-block-button {
	&.has-custom-width {
		.wp-block-button__link {
			box-sizing: border-box;
		}
	}

	@for $i from 1 through 4 {
		&.wp-block-button__width-#{$i * 25} {
			.wp-block-button__link {
				width: $i * 25%; // 25%, 50%, 75%, 100%
			}
		}
	}
}