1  <!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (line-items to line_items) making the component unusable -->
  2  <script lang="ts">
  3    import Button from '../button/button.svelte';
  4    import ArrowBoxUpRight from '../icons/ArrowBoxUpRight.svelte';
  5  
  6    interface Props {
  7      reverse?: boolean;
  8      illustrationPadding?: string | undefined;
  9      illustrationScale?: string | undefined;
 10      button?:
 11        | {
 12            text: string;
 13            href: string;
 14          }
 15        | undefined;
 16      illustration?: import('svelte').Snippet;
 17      headline?: import('svelte').Snippet;
 18      description?: import('svelte').Snippet;
 19      line_items?: import('svelte').Snippet;
 20    }
 21  
 22    let {
 23      reverse = false,
 24      illustrationPadding = undefined,
 25      illustrationScale = undefined,
 26      button = undefined,
 27      illustration,
 28      headline,
 29      description,
 30      line_items,
 31    }: Props = $props();
 32  </script>
 33  
 34  <div class="solution-card" class:reverse>
 35    <div
 36      style:padding={illustrationPadding}
 37      class="illustration"
 38      style:--illustration-scale={illustrationScale}
 39    >
 40      {@render illustration?.()}
 41    </div>
 42    <div class="content">
 43      <div class="inner">
 44        <h2>{@render headline?.()}</h2>
 45        {#if description}
 46          <p>{@render description?.()}</p>
 47        {/if}
 48        <div class="line-items">
 49          {@render line_items?.()}
 50        </div>
 51        {#if button}
 52          <div>
 53            <Button icon={ArrowBoxUpRight} href={button.href} target="_blank">{button.text}</Button>
 54          </div>
 55        {/if}
 56      </div>
 57    </div>
 58  </div>
 59  
 60  <style>
 61    .solution-card {
 62      background-color: var(--color-background);
 63      width: 100%;
 64      display: flex;
 65      margin-top: 2rem;
 66      border: 1px solid var(--color-foreground-level-2);
 67      border-radius: 2rem 0 2rem 2rem;
 68      gap: 1rem;
 69    }
 70  
 71    .solution-card.reverse {
 72      flex-direction: row-reverse;
 73    }
 74  
 75    .solution-card > * {
 76      flex: 1;
 77    }
 78  
 79    .illustration {
 80      position: relative;
 81      height: 10000px; /* Stupid hack because Safari is being Safari */
 82      max-height: 30rem;
 83      margin-top: -2rem;
 84      margin-bottom: -2rem;
 85      display: flex;
 86      justify-content: center;
 87      align-items: center;
 88      transform: scale(var(--illustration-scale, 1));
 89    }
 90  
 91    .content {
 92      display: flex;
 93      flex-direction: column;
 94      justify-content: center;
 95      align-items: center;
 96    }
 97  
 98    .content .inner {
 99      max-width: 600px;
100      height: 100%;
101      padding: 2rem;
102      display: flex;
103      flex-direction: column;
104      gap: 1rem;
105      justify-content: center;
106    }
107  
108    h2 {
109      font-size: 1rem;
110      line-height: 1.5rem;
111    }
112  
113    @media (max-width: 882px) {
114      .solution-card {
115        flex-direction: column;
116        margin-top: 3rem;
117        margin-bottom: 0;
118      }
119  
120      .solution-card.reverse {
121        flex-direction: column;
122      }
123  
124      .illustration {
125        flex-basis: 20rem;
126        display: flex;
127        width: calc(100% - 1rem);
128        max-height: 20rem;
129        margin: 0 auto;
130        margin-top: -3rem;
131        margin-bottom: 1rem;
132        transform: none;
133      }
134    }
135  </style>