<script setup>
defineProps({
  /**
   * ボタンの有効無効の切り替え
   * @example disabled: false
   */
  disabled: {
    type: Boolean,
    default: false,
  },
  /**
   * ボタンの右側テキスト
   * @example p_Label: '削除'
   */
  p_Label: {
    type: String,
    default: '削除',
  },
})
</script>

<template>
  <button class="_trash_design" :disabled="disabled">
    <span class="_trash_contents">
      <img class="_trash_img" src="/icons/trashbtn.png" />
      <div class="_trash_text">{{ p_Label }}</div>
    </span>
  </button>
</template>

<style lang="sass">
// ---------------------------------------------------------------------------
// ボタンの基本的なデザイン
// ---------------------------------------------------------------------------
._trash_design
  user-select: none
  width: fit-content
  height: 32px
  margin-right: 5px
  box-sizing: none
  border: none
  background: transparent
  border-radius: 3px
  padding: 0

// ---------------------------------------------------------------------------
// 画像のおおきさ
// ---------------------------------------------------------------------------
._trash_img
  height: 21px
  width: 16px
  margin: 5px

// ---------------------------------------------------------------------------
// 疑似クラス（hover,activ,disabledなど）
// ---------------------------------------------------------------------------
._trash_design:not(:disabled):hover,
  // background: #dddddd
._trash_design:not(:disabled):focus-visible
  background: rgba(29, 29, 29, 0.15)

._trash_design:not(:disabled):active
  // background: #cdcdcd
  background: rgba(29, 29, 29, 0.22)

._trash_design:disabled
  opacity: .7

._trash_design:hover
  cursor: pointer

._trash_design:disabled:hover
  cursor: not-allowed

._trash_icon_design
  padding-bottom: 3px

// ---------------------------------------------------------------------------
// ボタン内の配置
// ---------------------------------------------------------------------------
._trash_contents
  display: flex
  align-items: stretch


// ---------------------------------------------------------------------------
// テキスト関係
// ---------------------------------------------------------------------------
._trash_text
  height: 19px
  margin: auto 0 auto
  color: #DD6262
  vertical-align: middle
  font: 14px "Noto Sans Jp", sans-serif
  line-height: 1.715em
  font-weight: 500
  text-align: center
</style>
