@mixin processing-animation($color: "foreground") {
  position: relative;

  $processing-graphic: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C9.09867 0 10.1333 0.213333 11.104 0.639999C12.0853 1.056 12.9333 1.62667 13.648 2.352C14.3733 3.06667 14.944 3.91467 15.36 4.896C15.7867 5.86667 16 6.90133 16 8C16 9.10933 15.7867 10.1493 15.36 11.12C14.944 12.0907 14.3733 12.9387 13.648 13.664C12.9333 14.3893 12.0853 14.96 11.104 15.376C10.1333 15.792 9.09867 16 8 16V12C8.544 12 9.056 11.8987 9.536 11.696C10.0267 11.4827 10.4533 11.1947 10.816 10.832C11.1787 10.4693 11.4667 10.048 11.68 9.568C11.8933 9.07733 12 8.55467 12 8C12 7.456 11.8933 6.944 11.68 6.464C11.4667 5.97333 11.1787 5.54667 10.816 5.184C10.4533 4.82133 10.0267 4.53333 9.536 4.32C9.056 4.10667 8.544 4 8 4V0Z' fill='black'/%3E%3C/svg%3E%0A");

  &::after {
    content: "";

    --processing-graphic: #{$processing-graphic};
    $mask: var(--processing-graphic) 0 0 / auto 100% no-repeat;
    -webkit-mask: $mask;
    mask: $mask;

    //because of bug in Safari 16 opacity and rotate can not be combined in animation @keyframes
    //so we're putting the color of the spinner in a var, that can be updated in each place where it is used, just like the background color was updatede before.
    //then we set the background color in the keyframes in stead, and it's working in Safari 16
    --processing-color: #{color($color)};
    background-color: #{var(--processing-color)};

    position: absolute;
    left: calc(50% - .5em);
    top: calc(50% - .5em);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform-origin: center center;
    height: 1em;
    width: 1em;

    animation-name: animation-processing;
    animation-duration: 900ms;
    animation-delay: 300ms;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: $easing-in-out;
  }

  @keyframes animation-processing {
    //background color added instead of opacity, due to bug in Safaru 16.0, where the animation wouldn't rotate.
    from {
      transform: rotateZ(-45deg);
      background-color: var(--processing-color);
    }

    33% {
      opacity: .6;
    }

    to {
      transform: rotateZ(315deg);
      background-color: var(--processing-color);
    }
  }
}