/* Shared button hover and focus effects. */

.back-link,
.contact-link,
.add-to-cart,
.cart-checkout {
  --button-bg: var(--accent);
  --button-fg: var(--accent-ink);
  --button-hover-bg: #111;
  --button-hover-fg: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--button-bg);
  background-image: linear-gradient(105deg, var(--button-hover-bg) 0 50%, transparent 50% 100%);
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 240% 100%;
  color: var(--button-fg);
  transition:
    background-position 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease,
    color 180ms ease,
    transform 160ms ease;
}

.add-to-cart,
.cart-checkout {
  --button-bg: #000;
  --button-fg: #fff;
  --button-hover-bg: var(--accent);
  --button-hover-fg: var(--accent-ink);
}

.back-link:hover,
.back-link:focus-visible,
.contact-link:hover,
.contact-link:focus-visible,
.add-to-cart:hover,
.add-to-cart:focus-visible,
.cart-checkout:hover,
.cart-checkout:focus-visible {
  background-position: 0 0;
  border-color: var(--button-hover-bg);
  color: var(--button-hover-fg);
  transform: translateY(-1px);
}

.back-link:focus-visible,
.contact-link:focus-visible,
.add-to-cart:focus-visible,
.cart-checkout:focus-visible {
  outline: 3px solid rgba(250, 225, 0, 0.42);
  outline-offset: 3px;
}

.cart-checkout:disabled {
  background: #d8d8de;
  color: #777482;
  transform: none;
}