/*
 * Width "Fit the text" (the default): StoreEngine's cart styles make this
 * button full width everywhere (`.storeengine-btn--proceed-to-checkout`),
 * so the block undoes that unless "Full width" is chosen.
 */
.wp-block-storeengine-checkout-button:not(.storeengine-checkout-button--full) .storeengine-btn--proceed-to-checkout {
	display: inline-flex;
	justify-content: center;
	width: auto;
	max-width: 100%;
}

.wp-block-storeengine-checkout-button.storeengine-checkout-button--full .storeengine-btn--proceed-to-checkout {
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
}

/* Button styles: StoreEngine buttons draw from their own variables
 * (customize-frontend.css); a style restates them. Fill is the button as it is. */
.wp-block-storeengine-checkout-button.is-style-outline .storeengine-btn {
	--bg-color: transparent;
	--text-color: var(--storeengine-primary-color);
	--border-color: var(--storeengine-primary-color);
	--hover-bg-color: var(--storeengine-primary-color);
	--hover-text-color: #fff;
	--hover-border-color: var(--storeengine-primary-color);
	border-style: solid;
	border-width: 1px;
}

.wp-block-storeengine-checkout-button.is-style-soft .storeengine-btn {
	--bg-color: color-mix(in srgb, var(--storeengine-primary-color) 12%, transparent);
	--text-color: var(--storeengine-primary-color);
	--border-color: transparent;
	--hover-bg-color: color-mix(in srgb, var(--storeengine-primary-color) 22%, transparent);
	--hover-text-color: var(--storeengine-primary-color);
	--hover-border-color: transparent;
}