.graphiql-spinner {
  height: 56px;
  margin: auto;
  margin-top: var(--px-16);
  width: 56px;

  &::after {
    animation: rotation 0.8s linear 0s infinite;
    border: 4px solid transparent;
    border-radius: 100%;
    border-top: 4px solid hsla(var(--color-neutral), var(--alpha-tertiary));
    content: '';
    display: inline-block;
    height: 46px;
    vertical-align: middle;
    width: 46px;
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}