.wp-block-button.wc-block-components-product-button {
	word-break: break-word;
	white-space: normal;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: $gap-small;

	.wp-block-button__link {
		word-break: break-word;
		white-space: normal;
		display: inline-flex;
		justify-content: center;
		text-align: center;
		// Set button font size so it inherits from parent.
		font-size: 1em;

		&.loading {
			opacity: 0.25;
		}

		&.loading::after {
			font-family: WooCommerce; /* stylelint-disable-line */
			content: "\e031";
			animation: spin 2s linear infinite;
			margin-right: 0;
			margin-left: 0.5em;
			display: inline-block;
			width: auto;
			height: auto;
		}
	}

	a[hidden] {
		display: none;
	}

	@keyframes slideOut {
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(-100%);
		}
	}

	@keyframes slideIn {
		from {
			transform: translateY(90%);
			opacity: 0;
		}
		to {
			transform: translate(0);
			opacity: 1;
		}
	}

	&.align-left {
		align-items: flex-start;
	}

	&.align-right {
		align-items: flex-end;
	}

	.wc-block-components-product-button__button {
		border-style: none;
		display: inline-flex;
		justify-content: center;
		white-space: normal;
		word-break: break-word;
		overflow: hidden;
		align-items: center;
		line-height: inherit;

		span {

			&.wc-block-slide-out {
				animation: slideOut 0.1s linear 1 normal forwards;
			}
			&.wc-block-slide-in {
				animation: slideIn 0.1s linear 1 normal;
			}
		}
	}

	.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%
			}
		}
	}
}