@layer components {
  .loading-state {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.875rem;
    padding-block: 4rem;
    text-align: center;
    color: var(--clr-brand-400);

    & > i {
      font-size: 1.875rem;
    }

    & > p {
      font-size: 0.875rem;
    }
  }
}