<script lang="ts">
  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">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: 10px;

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

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

    &__text {
      @include baseTitle;
    }
  }
</style>