<template>
  <button class="control" @click.stop.prevent="$emit('callback')">
    <svg class="control__arrow" :class="`control__arrow--${direction}`" width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M1.41 7.41L6 2.83l4.59 4.58L12 6 6 0 0 6z"/></defs><use xlink:href="#a" fill-rule="evenodd"/></svg>
  </button>
</template>

<script>
export default {
  name: 'arrow-control',
  props: {
    direction: {
      type: String,
      required: false,
      default: 'left',
      validator: (val) => {
        return ['left', 'right'].indexOf(val) !== -1;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.control {
  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%);
  }
  &__arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    fill: $color-primary;
    &--left {
      transform: translate(-50%,-50%) rotate(-90deg);
    }
    &--right {
      transform: translate(-50%,-50%) rotate(90deg);
    }
  }
}
</style>

