1  <script lang="ts">
 2      import type { ComponentType } from 'svelte';
 3  
 4      export let icon: ComponentType;
 5      export let label: string;
 6  </script>
 7  
 8  <div class="navigation-item__content">
 9      {#if $$slots['prefix']}
10          <slot name="prefix" />
11      {/if}
12  
13      <span class="navigation-item__icon">
14          <slot name="icon">
15              <svelte:component this={icon} aria-hidden="true" />
16          </slot>
17      </span>
18  
19      <span class="navigation-item__label">
20          <slot name="label">
21              {label}
22          </slot>
23      </span>
24  </div>
25  
26  <style lang="scss">
27      @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
28      @use 'amp/stylekit/core/mixins/line-clamp' as *;
29      @use 'amp/stylekit/core/mixins/overflow-bleed' as *;
30      @use 'ac-sasskit/core/locale' as *;
31  
32      .navigation-item__content {
33          border-radius: inherit;
34          display: flex;
35          align-items: center;
36          width: 100%;
37          column-gap: 8px;
38          color: var(--navigation-item-text-color, var(--systemPrimary));
39  
40          :global(.navigation-item--selected) & {
41              font: var(--title-2-emphasized);
42  
43              @media (--sidebar-visible) {
44                  font: var(--title-3-medium);
45              }
46          }
47      }
48  
49      .navigation-item__icon {
50          line-height: 0; // Normalize line height
51          flex: 0 0;
52          flex-basis: var(--navigation-item-icon-size, 32px);
53  
54          :global(svg) {
55              width: 100%;
56              height: 100%;
57              fill: var(--navigation-item-icon-color, var(--keyColor));
58          }
59  
60          @media (--sidebar-visible) {
61              flex-basis: var(--navigation-item-icon-size, 24px);
62          }
63      }
64  
65      .navigation-item__label {
66          flex: 1;
67  
68          @include line-clamp;
69          @include overflow-bleed(4px);
70      }
71  </style>