/* objects/buttons.css
   Every button on the site, including WooCommerce's.
   Rewind Club - loaded in order by functions.php. */

.btn,
.o-btn,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:700 16px/1 var(--font-body); text-transform:none; letter-spacing:0;
  padding:15px 26px; border-radius:14px;
  border:2px solid var(--ink); background:var(--ink); color:var(--paper);
  text-decoration:none; cursor:pointer;
  box-shadow:4px 4px 0 var(--kraft-2);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn:hover,
.o-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover{
  transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--kraft-2);
  background:var(--ink); color:var(--paper);
}

.btn:active,
.o-btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--kraft-2)}

.btn.alt,
.o-btn--outline,
.woocommerce a.button.rc-ghost{
  background:transparent; color:var(--ink); box-shadow:4px 4px 0 var(--line);
}

.btn.alt:hover,
.o-btn--outline:hover{background:transparent; color:var(--ink); box-shadow:6px 6px 0 var(--line)}

.btn.big,
.o-btn--big{font-size:17px; padding:17px 24px}

.woocommerce button.button.alt.disabled,
.woocommerce button.button:disabled{opacity:.45; box-shadow:none; transform:none; cursor:not-allowed}

@media (prefers-reduced-motion: reduce){
  .btn:hover,.btn:active,.wp-block-button__link:hover,
  .woocommerce a.button:hover,.woocommerce button.button:hover{transform:none}
}