<template>
  <b-button
    class="dot-btn"
    :class="['dot-btn-' + variant, { 'active': active, 'show': show }]"
    v-bind="$attrs" v-on="$listeners"
    :active="active"
    :variant="variant"
    @mouseover="show = true"
    @mouseleave="show = false"
    @focus="show = true"
    @blur="show = false"
    @click="onClick"
  >
    <span>
      <slot name="default" />
    </span>
  </b-button>
</template>

<script>
export default {
  name: 'DotButton',

  props: {
    variant: { type: String, required: true },
    active: { type: Boolean, default: false }
  },

  data () {
    return {
      show: false
    }
  },

  methods: {
    onClick (e) {
      this.$el.blur()
    }
  }
}
</script>

<style lang="scss" scoped>
@each $color, $value in $theme-colors {
  .dot-btn-#{$color} {
    @include dot-button-variant($value, $value);
  }
}

.dot-btn {
  word-break: keep-all;
  white-space: pre;

  &:not(.show) {
    min-height: 1.1875rem;
    min-width: 1.1875rem;
    padding: 0;

    &.dot-btn-depart {
      min-height: 1.875rem;
      min-width: 1.875rem;
    }

    span {
      display: none;
    }
  }
}
</style>
