@layer components {
  .blank-slate {
    align-items: center;
    border: 2px dashed var(--color-ink-lighter);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    justify-content: center;
    margin: var(--block-space) auto;
    max-inline-size: 40ch;
    padding: calc(var(--block-space) * 2);
    text-align: center;
  }

  .blank-slate__icon {
    --icon-size: 3rem;

    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 50%;
    color: var(--color-ink-light);
    display: flex;
    height: calc(var(--icon-size) * 2);
    justify-content: center;
    width: calc(var(--icon-size) * 2);

    svg {
      height: var(--icon-size);
      width: var(--icon-size);
    }
  }

  .blank-slate__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space) / 4);
  }

  .blank-slate__title {
    color: var(--color-ink);
    font-size: var(--text-large);
    font-weight: 700;
    margin: 0;
  }

  .blank-slate__description {
    color: var(--color-ink-dark);
    font-size: var(--text-medium);
    margin: 0;
  }

  .blank-slate__actions {
    display: flex;
    gap: var(--block-space-half);
    margin-block-start: calc(var(--block-space) / 2);
  }

  /* Variant for when filters are active but no results */
  .blank-slate--filtered {
    border-style: solid;
    border-color: var(--color-ink-lightest);
    background: var(--color-ink-lightest);
  }

  .blank-slate--filtered .blank-slate__icon {
    background: var(--color-canvas);
  }

  /* Auto-hide blank slates when content exists */
  /* List container: hide blank slate if sibling items exist */
  .list:has(> .list__item) > .blank-slate,
  .list:has(> .list__item) > .blank-slate--empty {
    display: none;
  }

  /* Hide "no results" blank slate when items are visible */
  .list:has(> .list__item:not([hidden])) > .blank-slate--filtered {
    display: none;
  }

  /* Show "no results" only when all items are hidden (filtered out) */
  .blank-slate--filtered {
    display: none;
  }

  .list:has(> .list__item[hidden]):not(:has(> .list__item:not([hidden]))) > .blank-slate--filtered {
    display: flex;
  }

  /* Also hide empty state when filtered state should show */
  .list:has(> .list__item[hidden]):not(:has(> .list__item:not([hidden]))) > .blank-slate--empty {
    display: none;
  }
}