<script lang="ts">
  import { t } from '$lib/translations';
  import back from '../../../assets/icons/back.svg';

  export let className: string | undefined = '';
</script>

<a class="back {className}" href="/blog">
  <img alt="Back icon" class="back__icon" src={back} />
  <p class="back__text">{$t('Back')}</p>
</a>

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

  .back {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 14px;
    right: 0;
    top: 27px;
    position: absolute;

    @include breakpoint-down('deskS') {
      right: 33px;
      gap: 8px;
    }

    @include breakpoint-down('tabL') {
      right: 33px;
      gap: 13px;
    }

    @include breakpoint-down('tabM') {
      right: 20px;
      top: 31px;
      gap: 14px;
    }

    &__icon {
      width: 34px;
      height: 19px;
    }

    &__text {
      font-family: Suisse Intl;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      letter-spacing: 0;
    }
  }
</style>