@layer components {
  .loading {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    h1 {
      font-size: var(--font-size-lg-x1);
    }

    p {
      color: var(--color-neutral-5);
    }
  }

  .loading__header {
    svg {
      width: var(--length-12);
      height: var(--length-12);
      color: var(--color-white);
      fill: var(--color-primary-6);
      animation: loading__spin 5s linear infinite;
    }
  }

  @keyframes loading__spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}