.spinner {
  vertical-align: middle;

  &::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--text-default-grey);
    border-radius: 50%;
    border-top-color: var(--background-default-grey);
    animation: spin 0.7s cubic-bezier(0, 0, 0.36, 0.78) infinite;
  }

  &.right {
    position: absolute;
    top: 3.7em;
    right: 1.2em;
  }

  &.left {
    top: 1.2em;
    left: 1.2em;
  }
}

// Add the keyframes for the spinner animation
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}