<template>
    <div class="menu-wrapper">
        <ul class="menu">
            <li class="menu-item">
                <p>Chat</p>
                <a>
                    <img src="/assets/icons/chat.png">
                </a>
            </li>
            <li class="menu-item">
                <p>World</p>
                <a>
                    <img src="/assets/icons/world.png">
                </a>
            </li>
            <li class="menu-item">
                <p>Users</p>
                <a>
                    <img src="/assets/icons/users.png">
                </a>
            </li>
            <li class="menu-item">
                <p>Inventory</p>
                <a>
                    <img src="/assets/icons/treasure-chest.png">
                </a>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
  @import '@/assets/scss/main';

  .menu-wrapper {
      .menu {
          list-style: none;
          display: flex;
          gap: 1.25rem;

          .menu-item {
              position: relative;
              p {
                  position: absolute;
                  bottom: 3.125rem;
                  width: 4rem;
                  text-align: center;
                  background-color: #B1B2B5;
                  border: 2px solid $white;
                  border-radius: 1.5rem;
                  height: 1.5rem;
                  font-size: 0.875rem;
                  line-height: 1.5rem;
                  left: 50%;
                  transform: translateX(-50%);
                  display: none;

                  &::after {
                      content: '';
                      position: absolute;
                      top: 100%;
                      background-color: $white;
                      height: 0.5rem;
                      width: 0.875rem;
                      clip-path: polygon(100% 0, 0 0, 50% 100%);
                      left: calc(50% - 0.4375rem);
                  }
              }

              a {
                  padding: 0.5rem;
                  background-color: rgba(127, 127, 127, 0.7);
                  border: 2px solid $white;
                  border-radius: 100%;
                  display: block;
                  width: 1.875rem;
                  height: 1.875rem;

                  img {
                      width: inherit;
                      height: inherit;
                  }
              }

              &:hover {
                  p {
                      display: block;
                  }
                  a {
                      background-image: url('/assets/galaxy.png');
                      background-position: center;
                      background-size: cover;
                      img {
                          -webkit-filter: drop-shadow(0px 3px 6px $black);
                          filter: drop-shadow(0px 3px 6px $black);
                      }
                  }
              }
          }
      }
  }
</style>