<script setup lang="ts">
import { messages } from '../lib/messages'
</script>

<template>
  <div class="empty-results">
    <strong>{{ messages.emptyResultsTitle }}</strong>
    <span>{{ messages.emptyResultsGuidance }}</span>
  </div>
</template>

<style scoped>
.empty-results {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-6);
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.empty-results strong {
  color: var(--c-text);
  font-weight: 500;
}

.empty-results span {
  font-size: var(--t-small);
}
</style>
