<script setup>
import { ref, watch, onMounted } from "vue";
import IconBack from "../assets/menu_icon/IconBack.vue";
import IconExchange from "../assets/menu_icon/IconExchange.vue";
import IconSetting from "../assets/menu_icon/IconSetting.vue";
</script>

<template>
  <div class="tools">
    <button><IconBack /></button>
    <button><IconSetting /></button>
    <button><IconExchange /></button>
  </div>
</template>

<style scoped>
.tools {
  position: absolute;
  top: 28px;
  right: 24px;
  display: flex;
  gap: 0px;
  z-index: 3;
}

button {
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: fill 0.2s ease-out;
  cursor: pointer;
}

.tools button {
  transform: scale(0.75);
}

.tools button:not(:first-child) {
  /* transform: scale(.7) translateX(-20px); */
  margin-left: -10px;
}
</style>

<style>
button svg #back-btn,
button svg #setting-btn,
button svg #switch-btn {
  transition: fill 0.2s ease-out;
}


button:hover svg #back-btn,
button:hover svg #setting-btn,
button:hover svg #switch-btn {
  fill: #b1daff !important;
}
</style>
