:root {
  --union-primary: #662483;
  --union-primary-2: #7d159a;
  --union-accent: #ad71c6;
  --union-hot: #a204af;
  --union-ink: #170624;
  --union-text: #ffffff;
  --union-muted: rgba(255, 255, 255, .76);
}

.button,
a.button,
.button-default,
.button-custom,
.button-custom_website,
[class*="button-"] > a.button {
  min-height: 58px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 10px 52px 10px 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at var(--union-liquid-x, 18%) var(--union-liquid-y, 20%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .08)) !important;
  color: var(--union-text) !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 12px 26px rgba(27, 0, 50, .18) !important;
  backdrop-filter: blur(18px);
  overflow: hidden !important;
  isolation: isolate;
  transition: transform .2s ease, background .24s ease, box-shadow .24s ease, border-color .24s ease !important;
  animation: unionLiquidBreath 7.5s ease-in-out infinite;
}

.button:hover,
a.button:hover {
  color: #fff !important;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .26) !important;
  background:
    radial-gradient(circle at var(--union-liquid-x, 82%) var(--union-liquid-y, 18%), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .1)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -18px 38px rgba(255, 255, 255, .055), 0 18px 34px rgba(27, 0, 50, .26) !important;
}

.button .icon,
.button i.icon,
.button img.icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
  padding: 8px !important;
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  border-radius: 12px !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(135deg, rgba(173, 113, 198, .78), rgba(102, 36, 131, .94)) !important;
  color: #fff !important;
  object-fit: contain !important;
  filter: none !important;
  z-index: 2;
}

.button::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  z-index: 2;
  color: rgba(255, 255, 255, .9);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-54%);
}

.button::before,
a.button::before {
  content: "";
  width: 38%;
  height: 155%;
  position: absolute;
  left: -48%;
  top: -28%;
  z-index: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .34) 45%, transparent 78%);
  filter: blur(10px);
  opacity: .44;
  transform: rotate(18deg);
  animation: unionLiquidSweep 5.8s ease-in-out infinite;
  animation-delay: calc(var(--delay, 1s) * 130ms);
  pointer-events: none;
}

.button:hover::before,
a.button:hover::before {
  opacity: .72;
  animation-duration: 2.6s;
}

@keyframes unionLiquidSweep {
  0%, 22% {
    left: -52%;
    opacity: 0;
  }
  42% {
    opacity: .48;
  }
  68%, 100% {
    left: 112%;
    opacity: 0;
  }
}

@keyframes unionLiquidBreath {
  0%, 100% {
    --union-liquid-x: 18%;
    --union-liquid-y: 22%;
  }
  50% {
    --union-liquid-x: 82%;
    --union-liquid-y: 14%;
  }
}

.union-link-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.union-link-title,
.union-link-url {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.union-link-url {
  color: rgba(255, 255, 255, .68);
  font-size: 11px;
  font-weight: 600;
}

.button-website .icon,
.button-custom_website .icon {
  background: rgba(255, 255, 255, .12) !important;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  a.button,
  .button::before,
  a.button::before {
    animation: none !important;
  }
}