@layer components {
  .spinner__root {
    align-items: center;
    justify-content: center;
  }

  /* Root - size */

  .spinner__root--size-sm {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .spinner__root--size-md {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .spinner__root--size-lg {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .spinner__indicator {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
}