<template>
  <div class="catalogue">
    <button class="catalogue__button">
      {{ t('header.catalogue.title') }}
      <span>▽</span>
    </button>
  </div>
</template>

<script setup>
import {useI18n} from "vue-i18n";

const {t} = useI18n()
</script>

<style lang="scss" scoped>
.catalogue {
  &__button {
    cursor: pointer;
    border-radius: $default_border_radius;
    background-color: rgba($accent, 0.2);
    border: 1px solid $accent;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;

    color: $accent;
    font-size: 16px;
    font-weight: 600;

    @include hover {
      background-color: $accent;
      color: $white;
    }

    & span {
      font-size: 26px;
    }
  }
}
</style>