:root {
  --action-lilac: #ff1e42;
  --action-ink: #ffffff;
  --action-disabled: #1d2336;
}

.button.primary.lilac-action {
  color: var(--action-ink);
  background-color: var(--action-lilac);
  border-color: #ff5c77;
  background-image: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, 0.35) 48%, rgba(255, 255, 255, 0.1) 56%, transparent 68%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(255, 30, 66, 0.45);
  transition: transform 140ms var(--ease-out), background-color .22s ease, box-shadow .22s ease, color .22s ease;
}

.button.primary.lilac-action:not(:disabled) {
  animation: arcade-shine 5.5s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
  .button.primary.lilac-action:hover:not(:disabled) {
    background-color: #ff3858;
    box-shadow: 0 0 32px rgba(255, 30, 66, 0.72);
  }
}

.button.primary.lilac-action:disabled {
  opacity: 1;
  background-color: var(--action-disabled);
  border-color: var(--line);
  background-image: none;
  box-shadow: none;
  color: #5c6887;
}

.button.primary.resolve-button {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .12em;
  justify-content: center;
  text-align: center;
}

.resolve-button > svg { display: none; }

@keyframes arcade-shine {
  0%, 15% { background-position: 160% 0; }
  65%, 100% { background-position: -160% 0; }
}