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

<template>
  <div class="banner" role="status">
    <div class="inner">
      <span class="dot" aria-hidden="true" />
      <span>{{ messages.modeBannerDemo }}</span>
    </div>
  </div>
</template>

<style scoped>
.banner {
  flex: none;
  padding: 9px var(--gutter);
  background: var(--c-banner-bg);
  border-bottom: 1px solid var(--c-banner-line);
}

.inner {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  max-width: var(--measure);
  margin: 0 auto;
  color: var(--c-accent-soft);
  font-family: var(--f-mono);
  font-size: var(--t-meta);
}

.dot {
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
}
</style>
