.button {
  border-radius: 0 !important;
  background-color: #fff !important;
  color: var(--color-clone-navy, #000f1e) !important;
  box-shadow: var(--shadow-lg) !important;
}

.button:hover,
.button:focus-visible {
  background-color: var(--color-clone-bg, #f6f6f6) !important;
  color: var(--color-clone-navy, #000f1e) !important;
}

.button .button__label,
.button svg {
  color: inherit;
}

.button__accent {
  display: none;
}

.clip-path-cta-wedge .button__accent {
  clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
}

.clip-path-cta-wedge-bordered .button__accent {
  clip-path: polygon(0.125rem 0.125rem, calc(100% - 0.125rem) 0.125rem, calc(100% - 1.125rem) calc(100% - 0.125rem), 0.125rem calc(100% - 0.125rem));
}

@media (prefers-reduced-motion: reduce) {
  .button__accent {
    transition: none;
    transform: none;
  }
}

/* wedge-secondary / wedge-white: Club color slides in from the left. */
.btn-slide-in-club {
  background-image: linear-gradient(
    to right,
    var(--color-club-cta, #d2003c) 50%,
    transparent 50%
  );
  background-size: 200% 100%;
  background-position: 100% center;
  transition: background-position 0.35s ease, color 0.35s ease;
}

.btn-slide-in-club:hover {
  background-position: 0% center;
  color: var(--color-club-primary-foreground, #ffffff) !important;
}

/* wedge-primary: white slides from left to right over the club button. */
.btn-slide-ltr {
  background-image: linear-gradient(
    to right,
    var(--color-club-primary-foreground, #ffffff) 50%,
    var(--color-club-cta, #d2003c) 50%
  );
  background-size: 200% 100%;
  background-position: 100% center;
  transition: background-position 0.35s ease, color 0.35s ease;
}

.btn-slide-ltr:hover {
  background-position: 0% center;
  color: var(--color-club-cta, #d2003c) !important;
}