@property --maxcontrol-beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.header-actions .btn-primary.small[href*="#/register"] {
  --maxcontrol-beam-angle: 0deg;
  border-color: transparent;
  background:
    linear-gradient(var(--yellow), var(--yellow)) padding-box,
    conic-gradient(
        from var(--maxcontrol-beam-angle),
        transparent 0deg 280deg,
        rgb(234 179 8 / 0.15) 294deg,
        #eab308 310deg,
        #fde047 326deg,
        #fff 334deg,
        #fde047 342deg,
        rgb(234 179 8 / 0.15) 354deg,
        transparent 360deg
      )
      border-box;
  animation: maxcontrol-border-beam 8s linear infinite;
}

/* Nada é desenhado sobre o texto ou sobre a área interna do botão. */
.header-actions .btn-primary.small[href*="#/register"]::before,
.header-actions .btn-primary.small[href*="#/register"]::after {
  content: none;
}

@keyframes maxcontrol-border-beam {
  to {
    --maxcontrol-beam-angle: 1turn;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-actions .btn-primary.small[href*="#/register"] {
    animation: none;
    background:
      linear-gradient(var(--yellow), var(--yellow)) padding-box,
      linear-gradient(90deg, #eab308, #fde047) border-box;
  }
}