<script lang="ts">
import { density } from './stores';
import { densities } from './config.json';
import Radio from './Radio.svelte';
</script>

<div>
  <fieldset>
    <legend>Note density</legend>
    <Radio bind:selection={$density} options={densities} />
  </fieldset>
</div>

<style>
fieldset {
  padding: 0;
  border: none;
  margin-top: 1rem;
}

legend {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0;
  margin-bottom: 1rem;
}
</style>