<template>
  <button
    type="button"
    class="trifle-button"
    :class="[
      type ? type : '',
      disable ? 'disable' : '',
    ]"
    @click="onClick"
  >
    <span><slot /></span>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: '',
    },
    onClick: {
      type: Function,
      default: function() {},
    },
    disable: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../mixin/mixin.scss';
@import '../const/variable.scss';

button {
  line-height: 1.4;
  padding: 5px 15px;
  margin: 0 8px 0 0;
  border-radius: 4px;
  user-select: none;
  touch-action: manipulation;
  cursor: pointer;
  outline: 0;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

  &:hover,
  &:focus {
    @include colorSet(
      palette(blue, light),
      palette(white, base),
      palette(blue, light)
    );
  }
  &:active {
    @include colorSet(
      palette(blue, dark),
      palette(white, base),
      palette(blue, dark)
    );
  }

  span {
    font-size: 14px;
  }
}

.primary {
  @include colorSet(
    palette(white, base),
    palette(blue, base),
    palette(blue, base)
  );

  &:hover,
  &:focus {
    @include colorSet(
      palette(white, base),
      palette(blue, light),
      palette(blue, light)
    );
  }
  &:active {
    @include colorSet(
      palette(white, base),
      palette(blue, dark),
      palette(blue, dark)
    );
  }
}

.danger {
  @include colorSet(
    palette(red, base),
    palette(gray, light),
    palette(gray, base)
  );

  &:hover,
  &:focus {
    @include colorSet(
      palette(gray, light),
      palette(red, base),
      palette(red, base)
    );
  }
  &:active {
    @include colorSet(
      palette(gray, light),
      palette(red, dark),
      palette(red, dark)
    );
  }
}

.disable {
  opacity: 0.3;
  pointer-events: none;
}
</style>
