<script lang="ts">
  import { t } from '$lib/translations';
  import { blogAnchors } from '../../../store';
</script>

<div class="anchors-button" tabindex="0" role="button" on:keydown={() => false} on:click={() => blogAnchors.set(true)}>
  {$t('Table of contents')}
  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M4.5 10L8.5 6L12.5 10" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</div>

<style lang="scss">
  @import '/src/scss/media';
  @import '/src/scss/mixins';
  @import '/src/scss/variables';

  .anchors-button {
    @include blogBaseTitle;

    display: flex;
    justify-content: center;
    position: fixed;
    padding: 12px 17px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 40px;
    overflow: hidden;
    color: white;
    z-index: 8;
    gap: 10px;

    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;


    svg {
      @include breakpoint-down('tabM') {
        width: 16px;
        height: 16px;
      }
    }
  }
</style>