<script>
export default {
  props: {
    clicked: {
      type: Boolean,
      required: true,
      default: false,
    },
    hovered: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
};
</script>

<template>
  <svg
    class="base"
    :class="{
      active: hovered || clicked,
    }"
    width="100"
    height="50"
    viewBox="0 0 25 25"
    y="13"
    x="30"
  >
    <path
      d="M6.5 15V11H9.5V15H13V9H15L8 3L1 9H3V15H6.5M9 16V18H15V16L18 19L15 22V20H9V22L6 19L9 16M23 9H21V15H15V10H19L13.54 5.11L16 3L23 9Z"
    />
  </svg>
</template>

<style scoped>
.base {
  fill: gray;
}
.active {
  fill: var(--color-background-clicked);
}
</style>
