<template>
  <button class="btn" :class="classes" type="button" @touchstart="onTouchstart" @touchend.prevent.stop="onTouchend">
    <span>
      <slot></slot>
    </span>
  </button>
</template>

<script>

export default {
  name: 'Button',
  data() {
    return {
      classes: {}
    };
  },
  methods: {
    onTouchstart() {
      this.classes = {
        active: true
      };
    },
    onTouchend() {
      this.clearActive();
      this.$emit('click');
    },
    clearActive() {
      this.classes = {};
    }
  }
};
</script>

<style lang="scss">
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: none;
  background: none;
  white-space: nowrap;
  line-height: 1.5;
  user-select: none;
  font-size: 30px;
  outline: 0;
  border: none;
  color: #000;
  transition: opacity 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
  background-color: #eee;
  height: 60px;
  padding-left: 40px;
  padding-right: 40px;

  &:active,
  &.active {
    opacity: 0.5;
    // color: #eee !important;
  }
}
</style>