<template>
  <div class="controls" :class="`controls__${direction}`">
    <button class="controls__up" @click.stop.prevent="$emit('up'), $emit('left')">
      <svg 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>
    <div class="controls__divider"></div>
    <button class="controls__down" @click.stop.prevent="$emit('down'), $emit('right')">
      <svg 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>
  </div>
</template>

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

<style lang="scss" scoped>
.controls {
  width: 25px;
  width: 2.5rem;
  height: 50px;
  height: 5rem;
  position: relative;
  overflow: hidden;
  background-color: $white;
  border-radius: border-radius(primary);
  box-shadow: box-shadow(primary);
  &__hor {
    transform: rotate(-90deg);
  }
  &__up, &__down {
    position: absolute;
    width: 100%;
    height: 50%;
    transition: all transition(fast);
    &:hover, &:focus {
      background-color: darken($white, 5%);
    }
    svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      fill: $color-primary;
    }
  }
  &__up {
    top: 0; 
  }
  &__down {
    bottom: 0;
    svg {
      transform: translate(-50%,-50%) rotate(180deg);
    }
  }
  &__divider {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: $color-border-primary;
  }
}
</style>

