@use "../../00-base/01-helpers" as *;

.ajax-progress-throbber {
  position: relative;
  display: inline-block;
  width: rem(20);
  height: rem(20);

  .throbber {
    display: block;
    width: rem(15);
    height: rem(15);
    border: rem(3) solid;
    border-color: hsla(var(--clr-spot-1), 0.2);
    border-top-color: hsl(var(--clr-spot-1));
    border-radius: 100%;
    background-image: none;
    animation: spin 1s infinite linear;
    pointer-events: none;
  }

  // throbber next to button needs realignment.
  button + & {
    // margin-top: rem(5);
    //margin-left: rem(10);
  }
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
