/* EmptyTile: the dashed tile a tile grid shows when it has nothing
   (EmptyTile.js). Load it after ModalSelect.css -- the grid stamps its base
   tile class on the tile, and the dashed border has to win over that one's.
   Padded and centered like a folder tile: its text wraps, and the base tile
   only centers the box. */
.empty-tile {
  flex-direction: column;
  cursor: default;
  border-style: dashed;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
  background: var(--color-surface);
}

.empty-tile:hover {
  transform: none;
  border-color: var(--color-border);
}

/* The action button sits further from the message than the message does
   from its icon: the 10px flex gap plus this margin totals --space-4 */
.empty-tile .button {
  margin-top: var(--space-2);
}

.empty-tile-icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-text-dark);
}

.empty-tile-text {
  color: var(--color-text-dark);
}