/* empty-state.css: Empty state (component 33). Owner: group B (P2.T5).
   Centred in its region; minimum 160 tall; --space-9 block and --space-7 inline padding; content column 360 wide, centred text. Optional
   icon --icon-lg in --text-secondary; the sentence in --type-sub; a --type-body --text-secondary second sentence; one 36 px button
   --space-5 below. Nothing to do is a good state (circle-check in --good). Never an illustration. */
[data-component="empty-state"] {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-block-size: var(--size-dropzone-min);
  padding-block: var(--space-9);
  padding-inline: var(--space-7);
  text-align: center;
  color: var(--text);
}
.empty-state__content {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: var(--size-popover-md);
}
.empty-state__content > .icon { color: var(--text-secondary); }
[data-variant="nothing-to-do"] .empty-state__content > .icon { color: var(--good); }
[data-variant="error"] .empty-state__content > .icon { color: var(--critical); }
.empty-state__sentence { margin: 0; font: var(--type-sub); color: var(--text); }
.empty-state__detail { margin: 0; font: var(--type-body); color: var(--text-secondary); }
.empty-state__controls { display: grid; justify-items: center; gap: var(--space-4); margin-block-start: var(--space-2); }

.empty-state__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-block-size: var(--size-control);
  padding-block: 0;
  padding-inline: var(--space-5);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: var(--type-button);
  text-decoration: none;
  cursor: pointer;
}
.empty-state__action:hover,
.empty-state__action[data-force="hover"] { background: var(--surface-hover); text-decoration: none; }
.empty-state__action:active,
.empty-state__action[data-force="active"] { background: var(--border); }
.empty-state__action--primary { border-color: var(--brand); background: var(--brand); color: var(--brand-contrast); }
.empty-state__action--primary:hover,
.empty-state__action--primary[data-force="hover"] { background: var(--brand-hover); border-color: var(--brand-hover); }
.empty-state__action--primary:active,
.empty-state__action--primary[data-force="active"] { background: var(--brand-hover); }
.empty-state__action[aria-disabled="true"] { background: var(--surface-sunken); border-color: var(--border); color: var(--text-disabled); cursor: not-allowed; }

/* The active filters of a no-results state: removable chips. */
.empty-state__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.empty-state__filters-item { max-inline-size: none; }
.empty-state__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-block-size: var(--size-chip-control);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--text);
  font: var(--type-label);
  cursor: pointer;
}
.empty-state__filter:hover { background: var(--surface-hover); }
.empty-state__filter .icon { color: var(--text-secondary); }

/* Kitchen sink only: the sample sits in a bordered region, as it does on a page. */
.empty-state-demo__mount { inline-size: 100%; border: var(--border-width) solid var(--border); border-radius: var(--radius-region); background: var(--surface); }