<script>
import Keypad from './Keypad.svelte';
import Timer from './Timer.svelte';
let countdown;
</script>
<div>
{#if countdown}
<Timer
on:new={() => {
countdown = null;
}}
{countdown}
/>
{:else}
<Keypad
on:countdown={(e) => {
countdown = e.detail;
}}
/>
{/if}
</div>
<style>
:global(*) {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:global(body) {
min-height: 100vh;
color: hsl(0, 0%, 98%);
background: hsl(240, 80%, 6%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,