<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="M18,14H14V18H10V14H6V10H10V6H14V10H18M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"
    />
  </svg>
</template>

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