{#if context} Columns

addToText(readableBinding)}> {readableBinding}

{/if} {#if instance} Components

addToText(readableBinding)}> {readableBinding}

{/if} Helpers

addToText(helper.text)}>
{helper.displayText}
{@html helper.description}
```
{helper.example || ''}
```

{#if !valid}
        <p class="syntax-error">
          Current Handlebars syntax is invalid, please check the guide
          <a href="https://handlebarsjs.com/guide/">here</a>
          for more details.
        </p>
      {/if}
    </div>
  </div>
</div>

.list::-webkit-scrollbar {
    display: none;
  }

.text {
    padding: var(--spacing-l);
    font-family: var(--font-sans);
  }
  .text :global(textarea) {
    min-height: 100px;
  }
  .text :global(p) {
    margin: 0;
  }
  ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    padding: 0;
  }

li {
    display: flex;
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    color: var(--grey-7);
    padding: var(--spacing-m) 0;
    margin: auto 0px;
    align-items: center;
    cursor: pointer;
    border: var(--border-light);
    border-width: 1px 0 1px 0;
  }

pre,
  .description {
    white-space: normal;
  }

li:hover {
    color: var(--ink);
    font-weight: 500;
  }

li:active {
    color: var(--blue);
  }

.drawer-contents {
    height: 40vh;
    overflow-y: auto;
  }

.syntax-error {
    padding-top: var(--spacing-m);
    color: var(--red);
    font-size: 12px;
  }

.syntax-error a {
    color: var(--red);
    text-decoration: underline;
  }

.description :global(p) {
    color: var(--grey-7);
  }

.description :global(p:hover) {
    color: var(--ink);
  }

.description :global(p a) {
    color: var(--grey-7);
  }
</style>