@use 'sprucecss/scss/spruce' as *;

.empty-state {
  border: config('border-width-base', $display) dashed color('border-strong');
  border-radius: radius('lg');
  padding: spacer-clamp('l', 'xl') spacer('m');
  text-align: center;
  @include layout-stack('s');

  &__icon {
    align-items: center;
    background-color: color-alpha('primary', 0.1);
    block-size: 4rem;
    border-radius: 50%;
    color: color('primary');
    display: flex;
    inline-size: 4rem;
    justify-content: center;
    margin-inline: auto;

    svg {
      block-size: 2rem;
      inline-size: 2rem;
    }
  }

  &__title {
    font-size: font-size('h4');
  }

  &__text {
    color: color('muted');
    margin-inline: auto;
    max-inline-size: 30rem;
  }

  &__actions {
    @include layout-cluster('s', center);
    margin-block-start: spacer('xs');
  }
}

<section class="empty-state" aria-labelledby="empty-state-title">
    <div class="empty-state__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
    </div>
    <h2 class="empty-state__title" id="empty-state-title">No projects yet</h2>
    <p class="empty-state__text">Projects keep your pages, components and styles together. Create your first one to get started.</p>
    <div class="empty-state__actions">
        <a class="btn btn--primary" href="#">Create project</a>
        <a class="btn btn--ghost-primary" href="#">Import from GitHub</a>
    </div>
</section>