{% set themeId = theme.fileSlug or page.fileSlug %}


<wa-scoped class="theme-icon-host theme-overall-icon-host">
  <template>
    <link rel="stylesheet" href="/dist/styles/utilities.css">
    <link rel="stylesheet" href="/dist/styles/native/content.css">
    <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
    <link rel="stylesheet" href="/assets/styles/theme-icons.css">

    <div class="theme-icon theme-overall-icon" role="presentation" data-no-anchor data-no-outline>
      <div class="row row-1">
        <h2>Aa</h2>
        <div class="swatches">
          <div class="wa-brand"></div>

          <div class="wa-success"></div>
          <div class="wa-warning"></div>
          <div class="wa-danger"></div>
          <div class="wa-neutral"></div>
        </div>
      </div>
      <div class="row row-2">
        <wa-input value="Input" size="small" inert></wa-input>
        <wa-button size="small" variant="brand" inert>Go</wa-button>
      </div>
    </div>
  </template>
</wa-scoped>
