<template>
  <button class="action-button" :type="type">
    {{ name }}
  </button>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'normal'
  },
  name: {
    type: String,
    default: ''
  }
})
</script>

<style lang="scss" scoped>
.action-button {
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(230, 231, 232, 1);
  border-radius: 4px;
  cursor: pointer;
  line-height: 26px;
  font-family: Source Han Sans CN;
  font-size: 16px;
  font-weight: 400;
  transition: all 0.3s;

}

.action-button[type="normal"] {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(59, 65, 75, 1);

  &:hover {
    background: var(--color-primary-2);
  }
}

.action-button[type="active"] {
  background-color: rgba(231, 243, 255, 1);
  color: var(--color-main-active);
  border: 1px solid var(--color-main-active);
}



/* 悬停效果
.action-button[type="normal"]:hover {
  background-color: #d9d9d9;
}

.action-button[type="active"]:hover {
  background-color: #40a9ff;
} */
</style>