<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="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M9 17H7V10H9V17M13 17H11V7H13V17M17 17H15V13H17V17Z"
    />
  </svg>
</template>

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