1  <script lang="ts">
 2    import * as modal from "@app/lib/modal";
 3  
 4    import Button from "./Button.svelte";
 5  
 6    export let title: string | undefined = undefined;
 7    export let showCloseButton: boolean = false;
 8  </script>
 9  
10  <style>
11    .modal {
12      padding: 2rem;
13      border-radius: var(--border-radius-regular);
14      font-family: var(--font-family-sans-serif);
15      background: var(--color-background-float);
16      border: 1px solid var(--color-border-hint);
17      box-shadow: var(--elevation-low);
18      min-width: 34rem;
19      max-width: 100vw;
20      gap: 1.5rem;
21      display: flex;
22      flex-direction: column;
23    }
24    .icon {
25      display: flex;
26      align-items: center;
27      justify-content: center;
28    }
29    .title {
30      font-size: var(--font-size-large);
31      font-weight: var(--font-weight-semibold);
32      text-align: center;
33      text-overflow: ellipsis;
34      overflow: hidden;
35    }
36    .subtitle {
37      font-size: var(--font-size-small);
38      text-align: center;
39    }
40    .body {
41      font-size: var(--font-size-regular);
42      display: flex;
43      justify-content: center;
44    }
45    .actions {
46      margin-top: 1rem;
47      display: flex;
48      justify-content: center;
49    }
50  </style>
51  
52  <div class="modal">
53    {#if $$slots.icon}
54      <div class="icon">
55        <slot name="icon" />
56      </div>
57    {/if}
58  
59    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
60      {#if title}
61        <div class="title">{title}</div>
62      {/if}
63  
64      {#if $$slots.subtitle}
65        <div class="subtitle">
66          <slot name="subtitle" />
67        </div>
68      {/if}
69    </div>
70  
71    {#if $$slots.body}
72      <div class="body">
73        <slot name="body" />
74      </div>
75    {/if}
76  
77    {#if showCloseButton}
78      <div class="actions">
79        <Button variant="outline" on:click={modal.hide}>Close</Button>
80      </div>
81    {/if}
82  </div>