/*
 * Button styles. StoreEngine buttons draw from their own variables (set by the
 * preset class, read by customize-frontend.css), so a style only restates them.
 * Fill is the button as it is.
 */
.wp-block-storeengine-product-add-to-cart.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-product-add-to-cart.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;
}

/* Icon beside the label (button mode). */
.wp-block-storeengine-product-add-to-cart .storeengine-btn--has-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
}