@layer components {
  @keyframes loading-spinner {
    0%   { rotate: 0deg; }
    5%   { rotate: 0deg; }
    20%  { rotate: calc(360deg * -0.05); }
    80%  { rotate: calc(360deg * 6.02); }
    90%  { rotate: calc(360deg * 6.015); }
    100% { rotate: calc(360deg * 6); }
  }

  .spinner {
    display: inline-block;
    position: relative;

    &::before {
      --image: url("/assets/icons/colab-fe364df6.svg");

      mask: var(--image) 0 0/100% no-repeat;
      background-color: var(--spinner-color, var(--color-ink-weak));
      animation-name: loading-spinner;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      inset-inline-start: calc(50% - calc(var(--spinner-size, 2rem) / 2));
      inset-block-start: calc(50% - calc(var(--spinner-size, 2rem) / 2));
      width: var(--spinner-size, 2rem);
      height: var(--spinner-size, 2rem);
      position: absolute;
      content: "";
    }
  }
}