.at-loader,
.--pending::before {
  --size: 1rem;
  --stroke: .125rem;
  --tone: currentColor;
  width: var(--size);
  height: var(--size);
  border: var(--stroke) solid color-mix(in srgb, var(--tone) 18%, transparent);
  border-top-color: var(--tone);
  border-radius: 50%;
  animation: at-loader-spin .8s linear infinite;
  box-sizing: border-box;
}

.at-loader {
  display: inline-block;
}

.--pending {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    pointer-events: none;
  }
}

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

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