@layer components {
  .spinner {
    display: none;
    inline-size: 7rem;
    margin: 2rem auto;
    position: relative;
    text-align: center;

    &::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--show & {
      display: block;
    }
  }

  .spinner__dot {
    animation: spinner-bounce 1.4s infinite ease-in-out both;
    block-size: 1.5rem;
    border: 1px solid var(--color-primary);
    border-radius: 100%;
    display: inline-block;
    inline-size: 1.5rem;
  }

  .spinner__dot--1 {
    animation-delay: -0.32s;
  }

  .spinner__dot--2 {
    border-color: var(--color-secondary);
    animation-delay: -0.16s;
  }

  .spinner__dot--3 {
    border-color: var(--color-tertiary);
  }

  @keyframes spinner-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
  }
}