@layer components {
  .empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-6);
    background: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);

    .empty-state__icon {
      svg path {
        stroke: hsl(39.35deg 89.56% 49.31%);
      }
      .loader {
        fill: var(--color-primary-600);
        path {
          stroke: transparent;
        }
      }
    }
    p {
      font-size: var(--text-xl);
      text-align: center;
    }

    .empty-state__actions {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2);
    }
  }

  [data-theme="dark"] {
    .empty-state {
      background: var(--color-surface);
    }
  }
}