.userButton {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: var(--space-1);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 180ms var(--easing-standard),
    color 220ms var(--easing-standard);
}

.userButton:hover {
  transform: scale(1.05);
  color: var(--color-text);
}

.userButtonOpen {
  color: var(--color-text);
}

.userButton:hover .spinContainer,
.userButtonOpen .spinContainer {
  animation-play-state: running;
  opacity: 1;
}

.userButton:focus-visible {
  outline: none;
  color: var(--color-text);
  box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
}

.spinContainer {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.72;
  transition: opacity 220ms var(--easing-standard);
  animation: spin-reverse 1.5s ease-in-out infinite reverse;
  animation-play-state: paused;
  pointer-events: none;
}

.spinRing {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 28deg,
      var(--color-primary-1) 28deg 118deg,
      transparent 118deg 148deg,
      var(--color-primary-2) 148deg 238deg,
      transparent 238deg 268deg,
      var(--color-primary-3) 268deg 358deg,
      transparent 358deg 360deg
    );
  mask: radial-gradient(circle, transparent 63%, black 66%);
  -webkit-mask: radial-gradient(circle, transparent 63%, black 66%);
  animation: spin-forward 14s linear infinite;
}

.userCore {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78%;
  height: 78%;
  border-radius: 999px;
  background: var(--color-surface-muted);
}

@keyframes spin-forward {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}