@layer components {
  .spinner {
    position: relative;

    &::before {
      --mask: no-repeat radial-gradient(#000 68%, #0000 71%);
      --dot-size: 1.25em;

      -webkit-mask: var(--mask), var(--mask), var(--mask);
      -webkit-mask-size: 28% 45%;
      animation: submitting 1.3s infinite linear;
      aspect-ratio: 8/5;
      background: currentColor;
      content: "";
      inline-size: var(--dot-size);
      inset: 50% 0.25em;
      margin-block: calc((var(--dot-size) / 3) * -1);
      margin-inline: calc((var(--dot-size) / 2) * -1);
      position: absolute;
    }
  }

  .spinner--small::before {
    --dot-size: 0.8em;
  }

  .infinite-scroll-sentinel {
    align-items: center;
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space);
    justify-content: center;
    padding: var(--block-space-double);
  }

  .articles-end {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
    font-style: italic;
    padding: var(--block-space-double);
    text-align: center;
  }
}