@use "newspack-colors" as np-colors;

.newspack-checkout-button {
	&__product-field {
		&__error {
			color: np-colors.$error-500;
			font-size: 0.9em;
			margin-top: 0.5em;
		}
		/* Workaround for hard-coded help text in FormTokenField. */
		.components-form-token-field__help {
			display: none;
		}
		&__tokenfield {
			position: relative;
			.components-spinner {
				position: absolute;
				top: 12px;
				right: 0;
			}
		}
		.components-base-control {
			margin: 0;
		}
	}
}

.wp-block-newspack-blocks-checkout-button {
	display: flex;

	&.alignwide,
	&.alignfull {
		.wp-block-button__link {
			width: 100%;
		}
	}
	[data-align="center"] & {
		flex-direction: column;

		.wp-block-button__link {
			margin-left: auto;
			margin-right: auto;
		}
	}

	&.wp-block-button__width-25 &__button {
		width: 25%;
	}
	&.wp-block-button__width-50 &__button {
		width: 50%;
	}
	&.wp-block-button__width-75 &__button {
		width: 75%;
	}
	&.wp-block-button__width-100 &__button {
		width: 100%;
	}

	&__button {
		width: auto;
	}
}

