1  <script lang="ts">
 2      import LaurelIcon from '~/sf-symbols/laurel.left.svg';
 3      import { getI18n } from '~/stores/i18n';
 4  
 5      const i18n = getI18n();
 6  </script>
 7  
 8  <h4>
 9      <span class="icon-container left" aria-hidden="true">
10          <LaurelIcon />
11      </span>
12      {$i18n.t('ASE.Web.AppStore.Review.EditorsChoice')}
13      <span class="icon-container right" aria-hidden="true">
14          <LaurelIcon />
15      </span>
16  </h4>
17  
18  <style lang="scss">
19      @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
20      @use 'ac-sasskit/core/locale' as *;
21  
22      h4 {
23          display: flex;
24          align-items: center;
25          justify-content: center;
26          width: 100%;
27          margin-bottom: 10px;
28          gap: 10px;
29          font: var(--font, var(--title-1-emphasized));
30          color: var(--systemSecondary);
31      }
32  
33      .icon-container.right {
34          transform: rotateY(180deg);
35  
36          @include rtl {
37              transform: rotateY(0);
38          }
39      }
40  
41      .icon-container.left {
42          @include rtl {
43              transform: rotateY(180deg);
44          }
45      }
46  
47      .icon-container :global(svg) {
48          overflow: visible;
49          height: 42px;
50          transform: translateY(3px);
51      }
52  
53      .icon-container :global(svg path) {
54          fill: var(--systemSecondary);
55      }
56  </style>