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

<template>
  <svg
    class="base_question"
    :class="{ hovered: hovered_question }"
    width="100"
    height="50"
    viewBox="0 0 25 25"
    :x="x"
    :y="y"
  >
    <circle cx="50%" cy="50%" r="40%"></circle>
    <text x="50%" y="50%">?</text>
  </svg>
</template>

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

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

.hovered circle {
  stroke: var(--color-highlight);
}
circle {
  stroke-width: 1.5;
  stroke: grey;
  fill-opacity: 0;
}
text {
  dominant-baseline: central;
  text-anchor: middle;
  font-weight: lighter;
}
</style>
