.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce-mini-cart .button,
.brxe-product-add-to-cart .button,
.brxe-product-add-to-cart .single_add_to_cart_button,
button[name="apply_coupon"],
button[name="update_cart"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap, var(--space-4xs));
padding-block: var(--btn-padding-block, var(--space-3xs));
padding-inline: var(--btn-padding-inline, var(--space-s));
font-size: var(--btn-font-size, var(--text-m));
font-weight: var(--btn-font-weight, 700);
line-height: var(--btn-line-height, var(--line-height-s));
letter-spacing: var(--btn-letter-spacing, 0.01%);
text-decoration: none;
text-wrap: nowrap;
white-space: nowrap;
border-width: var(--btn-border-width, 1px);
border-style: var(--btn-border-style, solid);
border-radius: var(--btn-radius, var(--radius-m));
box-shadow: var(--btn-shadow, var(--shadow-s));
transition: var(--btn-transition, all 0.25s ease-in-out);
cursor: pointer;
user-select: none;
outline: 0;
--btn-color: var(--secondary);
--btn-color-fg: var(--secondary-fg);
--btn-mix: white;
--_mix: var(--btn-mix, black);
background-color: var(--btn-color);
color: var(--btn-color-fg);
border-color: var(--btn-color);
&:hover {
transform: translateY(-1px);
box-shadow: var(--btn-shadow--hover, var(--shadow-m));
background-color: color-mix(in oklab, var(--btn-color) 85%, var(--_mix));
border-color: color-mix(in oklab, var(--btn-color) 85%, var(--_mix));
}
&:active {
transform: translateY(0);
background-color: color-mix(in oklab, var(--btn-color) 75%, var(--_mix));
border-color: color-mix(in oklab, var(--btn-color) 75%, var(--_mix));
}
&:focus-visible {
outline: var(--btn-outline-border-width, 2px) solid var(--secondary);
outline-offset: 2px;
}
&:disabled,
&.disabled {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
&.alt {
--btn-color: var(--primary);
--btn-color-fg: var(--primary-fg);
--btn-mix: black;
}
}
button[name="update_cart"],
button[name="apply_coupon"],
.woocommerce a.button.cancel {
--btn-color: var(--muted);
--btn-color-fg: var(--muted-fg);
--btn-mix: black;
}
.woocommerce input.button,
.woocommerce #respond input#submit {
display: inline-block;
text-align: center;
}