<svelte:head>
  <script src="/giscus-loader.js" defer></script>
</svelte:head>

<div class="giscus-container" data-giscus-root>
  <button class="comments-toggle" type="button">Show comments</button>
  <div class="giscus-trigger"></div>
  <div class="giscus-slot"></div>
</div>

<style>
  .comments-toggle {
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
  }

  .comments-toggle:disabled {
    opacity: 0.75;
    cursor: default;
  }

  .giscus-trigger {
    height: 1px;
  }
</style>
