/* Lead Desk activity indicator: local signals connect and resolve into opportunity. */
.activity-indicator {
  --activity-color:var(--green,#24634b);
  position:relative;
  display:inline-block;
  width:48px;
  height:30px;
  flex:0 0 48px;
  color:var(--activity-color);
  vertical-align:middle;
}
.activity-indicator::before {
  content:"";
  position:absolute;
  left:7px;
  top:19px;
  width:29px;
  height:1px;
  background:currentColor;
  opacity:.46;
  transform:rotate(-24deg) scaleX(.2);
  transform-origin:left center;
  animation:activity-route 1.35s cubic-bezier(.22,1,.36,1) infinite;
}
.activity-point {
  position:absolute;
  width:5px;
  height:5px;
  border:1px solid currentColor;
  border-radius:50%;
  background:var(--activity-surface,#fff);
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent);
  animation:activity-point 1.35s ease-in-out infinite;
}
.activity-point-one { left:4px; top:20px; }
.activity-point-two { left:18px; top:13px; animation-delay:.18s; }
.activity-point-three { left:31px; top:7px; animation-delay:.36s; }
.activity-arrow {
  position:absolute;
  right:1px;
  top:-2px;
  font-size:20px;
  font-weight:650;
  line-height:1;
  opacity:.3;
  animation:activity-arrow 1.35s cubic-bezier(.22,1,.36,1) infinite;
}
.activity-indicator--button {
  --activity-color:currentColor;
  --activity-surface:transparent;
  width:34px;
  height:21px;
  flex-basis:34px;
}
.activity-indicator--button::before { left:3px; top:15px; width:22px; }
.activity-indicator--button .activity-point { width:4px; height:4px; box-shadow:none; }
.activity-indicator--button .activity-point-one { left:1px; top:15px; }
.activity-indicator--button .activity-point-two { left:11px; top:11px; }
.activity-indicator--button .activity-point-three { left:21px; top:6px; }
.activity-indicator--button .activity-arrow { right:0; top:-2px; font-size:16px; }
.activity-label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
button.is-pending { cursor:wait; }
button.is-pending { justify-content:center; }
button.is-pending .activity-indicator { order:-1; }
.auth-submit.is-pending>.activity-label { font-size:12px; font-weight:600; line-height:1.4; }
.field-activity {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:24px;
  color:var(--green,#24634b);
  font-size:9px;
  font-weight:650;
}
.field-activity[hidden] { display:none; }
.field-activity .activity-indicator { transform:scale(.68); transform-origin:left center; margin-right:-12px; }
@keyframes activity-route {
  0%,12% { opacity:.16; transform:rotate(-24deg) scaleX(.15); }
  62%,100% { opacity:.52; transform:rotate(-24deg) scaleX(1); }
}
@keyframes activity-point {
  0%,100% { opacity:.35; transform:scale(.72); }
  38%,68% { opacity:1; transform:scale(1); }
}
@keyframes activity-arrow {
  0%,38% { opacity:.25; transform:translate(-3px,3px) scale(.88); }
  72%,100% { opacity:1; transform:translate(0,0) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
  .activity-indicator::before,
  .activity-point,
  .activity-arrow { animation:none!important; }
  .activity-indicator::before { opacity:.52; transform:rotate(-24deg) scaleX(1); }
  .activity-point,.activity-arrow { opacity:1; transform:none; }
}
@media (forced-colors:active) {
  .activity-indicator { --activity-color:CanvasText; }
}