<template>
  <button class="arithmetic" @click.stop.prevent="$emit('callback')">
    <svg v-if="operator === 'addition'" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M6 8H0V6h6V0h2v6h6v2H8v6H6z" fill-rule="evenodd"/></svg>
    <svg v-if="operator === 'subtraction'" width="11" height="2" viewBox="0 0 11 2" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h11v2H0z" fill-rule="evenodd"/></svg>
    <svg v-if="operator === 'division'" width="10" height="14" viewBox="0 0 10 14" xmlns="http://www.w3.org/2000/svg"><path d="M9.366 1.438l-7 12.124-1.732-1 7-12.124z" fill-rule="evenodd"/></svg>
    <svg v-if="operator === 'multiplication'" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6 7.414l-4.243 4.243-1.414-1.414L4.586 6 .343 1.757 1.757.343 6 4.586 10.243.343l1.414 1.414L7.414 6l4.243 4.243-1.414 1.414z" fill-rule="evenodd"/></svg>
  </button>
</template>

<script>
export default {
  name: 'arithmetic-control',
  props: {
    operator: {
      type: String,
      required: false,
      default: 'addition',
      validator: (val) => {
        return ['addition', 'subtraction', 'multiplication', 'division'].indexOf(val) !== -1;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.arithmetic {
  position: relative;
  width: 25px;
  width: 2.5rem;
  height: 25px;
  height: 2.5rem;
  border-radius: border-radius(primary);
  background-color: $white;
  transition: all transition(fast);
  box-shadow: box-shadow(primary);
  &:hover, &:focus {
    background-color: darken($white, 5%);
  }
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    fill: $color-primary;
    transform: translate(-50%,-50%);
  }
}
</style>

