<script>
export default {
  props: {
    x: {
      type: String,
      required: true,
    },
    y: {
      type: String,
      required: true,
    },
    hovered_back: {
      type: Boolean,
    },
  },
};
</script>

<template>
  <svg
    class="base_back"
    :class="{ hovered: hovered_back }"
    width="100"
    height="50"
    viewBox="0 0 25 25"
    :x="x"
    :y="y"
  >
    <circle cx="50%" cy="50%" r="40%"></circle>
    <path d="m 16.524059,12.499999 -8.0481182,2e-6" />
    <path d="M 11.911549,9.064389 8.4759408,12.500001" />
    <path d="M 11.911549,15.935613 8.4759408,12.500001" />
  </svg>
</template>

<style scoped>
.base_back {
  fill: grey;
}

.hovered {
  fill: var(--color-highlight);
}

.hovered circle {
  stroke: var(--color-highlight);
}

.hovered path {
  stroke: var(--color-highlight);
}
circle {
  stroke-width: 1.5;
  stroke: grey;
  fill-opacity: 0;
}
path {
  stroke-width: 1.5;
  stroke: gray;
  stroke-linecap: round;
}
</style>
