<template>
  <div class="lina-button-group">
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    for (let node of this.$el.children) {
      const name = node.nodeName.toLowerCase()
      if (name !== 'button') {
        console.warn(`button-group 组件的子元素应该全是 button, 但你写的是 ${name}`)
      }
    }
  }
}
</script>

<style lang="scss">
  .lina-button-group {
    display: inline-flex;
    vertical-align: middle;

    > .lina-button {
      border-radius: 0;

      &:not(:first-child) {
        margin-left: -1px;
      }

      &:hover { position: relative; z-index: 1; }

      &:first-child {
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
      }

      &:last-child {
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
      }
    }
  }
</style>