<template>
  <button v-if="onClear" class="icon-cross" @click.stop="onClear"></button>
</template>

<style lang="scss" scoped>
button {
  background: none;
  border: 0;
  padding: 8px;
}

.icon-cross {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: 0.3s opacity ease;
  font-size: 12px;
}
</style>

<script>
export default {
  props: {
    onClear: {
      type: Function
    }
  }
};
</script>
