<script setup>
defineOptions({
  name: 'xtx-button'
})

defineProps({
  size: {
    type: String,
    default: 'middle',
  },
  type: {
    type: String,
    default: 'default',
  },
})
</script>

<template>
  <button class="xtx-button ellipsis" :class="[size, type]">
    <!-- 放置插槽 放文本内容 -->
    <slot>按钮</slot>
  </button>
</template>

<style scoped lang="less">
.xtx-button {
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.5s ease;
  font-family: inherit;

  &:hover {
    opacity: 0.8;
  }

  &.large {
    width: 240px;
    height: 50px;
    font-size: 16px;
  }
  &.middle {
    width: 180px;
    height: 50px;
    font-size: 16px;
  }
  &.small {
    width: 100px;
    height: 32px;
    font-size: 14px;
  }
  &.mini {
    width: 60px;
    height: 32px;
    font-size: 14px;
  }
  &.default {
    border-color: #e4e4e4;
    color: #666;
  }
  &.primary {
    border-color: var(--xtx-color);
    background: var(--xtx-color);
    color: #fff;
  }
  &.plain {
    border-color: var(--xtx-color);
    color: var(--xtx-color);
    background: lighten(#27ba9b, 50%);
  }
  &.gray {
    border-color: #ccc;
    background: #ccc;
    color: #fff;
  }
}
</style>
