<template>
  <div class="flex items-center text-gray-400">
    <div class="flex items-end">
      <fa
        icon="font"
        class="text-xs hover:text-hover cursor-pointer"
        @click="onChangeSize(documentFontSize - 0.1)"
      />
      <fa
        icon="font"
        class="text-sm px-1 hover:text-hover cursor-pointer"
        @click="onChangeSize(1)"
      />
      <fa
        icon="font"
        class="text-base hover:text-hover cursor-pointer"
        @click="onChangeSize(documentFontSize + 0.1)"
      />
    </div>

    <div class="hover:text-hover mx-3 cursor-pointer" @click="onA11y">
      <fa icon="wheelchair" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      documentFontSize: 1,
    }
  },
  methods: {
    onChangeSize(size) {
      this.documentFontSize = size < 0.8 ? 0.8 : size > 1.2 ? 1.2 : size
      document.documentElement.style.fontSize = this.documentFontSize + 'em'
    },
    onA11y() {
      console.log('a11y')
    },
  },
}
</script>

<style lang="scss" scoped></style>