<template>
  <div :id="id" :style="styleExternalBtn" class="common-icon" :class="select?'select-bg':''" v-on="$listeners" :data-tip="textHover"/>
</template>

<script>

export default {
  name: 'CommonBtn',
  props: {
    id: {
      type: String,
      required: true
    },
    bg: {
      type: String,
      required: true
    },
    bgHover: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '0.12'
    },
    height: {
      type: String,
      default: '0.12'
    },
    textHover: {
      type: String,
      default: ''
    },
    select: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    styleExternalBtn() {
      return {
        background: `url(${this.bg})`,
        '--hover-url': `url(${this.bgHover})`,
        width: `${this.width}` + 'rem',
        height: `${this.height}` + 'rem',
      }
    },
  },
}
</script>

<style scoped>
.common-icon {
  width: 3em;
  height: 3em;
  background-repeat: no-repeat;
  cursor: pointer;
  /*background-size: cover !important;*/
  background-size: 120% !important;
  background-position:50% 50% !important;
  -webkit-animation: rotate-in-2-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: rotate-in-2-cw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.common-icon:hover {
  --hover-url: '';
  background: var(--hover-url) !important;
  background-size: 120% !important;
  background-position:50% 50% !important;
}
.select-bg {
  background: var(--hover-url) !important;
  background-size: 120% !important;
  background-position:50% 50% !important;
}
.common-icon:hover::before {
  content: attr(data-tip);
  display: block;
  word-break: keep-all;
  white-space: nowrap;
  letter-spacing: 0.1rem;
  position: relative;
  padding:  0.01rem 0.3rem;
  color: #fff;
  /*font-weight: bold;*/
  border: 1px solid #246aa1;
  background: #154a76;
  border-radius: 5px;
  top: 95%;
}

</style>