Укажите дочерний элемент в родительском в svelte

Я пытаюсь воспроизвести шаблон загрузки страницы из здесь

HTML

<div class = "loading">
  <div class = "loading__ring">
    <svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" version = "1.1" x = "0px" y = "0px" viewBox = "0 0 100 100" style = "enable-background:new 0 0 100 100;" xml:space = "preserve"><path>...../path></svg>
  </div>
<div class = "loading__ring">
    <svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" version = "1.1" x = "0px" y = "0px" viewBox = "0 0 100 100" style = "enable-background:new 0 0 100 100;" xml:space = "preserve"><path>......</path></svg>
  </div>
</div>

Обычный стиль CSS

/* Demo */
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#ecf0f1, #fff);
}

/* Animation */
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Variables */
$loader-size: 100px;

/* Loading Icon */
.loading {
  width: $loader-size;
  height: $loader-size;

  &__ring {
    position: absolute;
    width: $loader-size;
    height: $loader-size;
    
    &:first-child {
      transform: skew(30deg,20deg);
    }

    &:last-child {
      transform: skew(-30deg,-20deg) scale(-1, 1);

      svg {
        animation-delay: -0.5s;
      }
    }

    svg {
      animation: rotate 1s linear infinite;
      fill: rgba(0, 0, 0, 0.2);
    }
  }
}

Я попытался изменить стиль svelte, используя пример, указав дочерний элемент, например .loading:global(loading__ring), но именно здесь я получаю сообщение об ошибке

Internal server error: /Users/mypc/Documents/testingsveltenvite/v2/src/App.svelte:18:2 Identifier is expected

Как изменить указание ребенка &__ringили.loading:global(loading__ring) и &:first-child в svelte

/* Loading Icon */
.loading {
  width: var(--size);
  height: var(--size);

  .loading:global(loading__ring) {
    position: absolute;
    width: var(--size);
    height: var(--size);
    
    &:first-child {
      transform: skew(130deg,15deg);
    }

    &:last-child {
      transform: skew(-130deg,-1deg) scale(-1, 1);

      svg {
        animation-delay: -0.91s;
      }
    }

    svg {
      animation: rotate 4s linear infinite;
      fill: rgba(0, 0, 0, 0.2);
    }
  }
}