<template>
  <button class="control" @click.stop.prevent="$emit('callback')">
    <svg class="control__arrow" :class="`control__arrow--${direction}`" width="20" height="11" viewBox="0 0 20 11" xmlns="http://www.w3.org/2000/svg"><path d="M20 5.5L14.196 11V6.509H0v-2.03h14.196L14.208 0z" fill-rule="evenodd"/></svg>
  </button>
</template>

<script>
export default {
  name: 'line-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;
    width: 17px;
    &--left {
      transform: translate(-50%,-50%) rotate(-180deg);
    }
    &--right {
      transform: translate(-50%,-50%);
    }
  }
}
</style>
