<script setup>
import MDIcon from '../MDIcon/MDIcon.vue'
/**
 * Buttonサイズ変更するのに、font-sizeを指定すれば、サイズがかわります
 */
defineProps({
  /**
   * アイコンの指定
   * material iconsのアイコンを指定できる
   * @example p_ButtonIconName: close
   */
  p_ButtonIconName: { type: String, required: true },
})
</script>

<template>
  <button class="c_button_icon _icon_btn">
    <!-- 背景用のspan -->
    <span class="_hover_effect"></span>
    <!-- アイコンの内容を変更（google fontsのアイコンを使用） -->
    <MDIcon :name="p_ButtonIconName" class="_c_material" />
  </button>
</template>
<style lang="sass" scoped>

// ---------------------------------------------------------------------------
// ボタンのデザイン
// ---------------------------------------------------------------------------
._icon_btn
  width: fit-content
  box-sizing: border-box
  line-height: 0.8
  position: relative
  background: transparent
  border: none
  border-radius: 50%
  box-shadow: none
  padding: 0px

// ---------------------------------------------------------------------------
// アイコンのサイズ、配置など
// ---------------------------------------------------------------------------
._c_material
  font-size: inherit
  color: inherit
  display: inline-flex
  align-items: center
  justify-content: center
  vertical-align: middle

// ---------------------------------------------------------------------------
// 背景色の変更
// ---------------------------------------------------------------------------
._hover_effect
  position: absolute
  border-radius: 50%
  left: 0
  top: 0
  width: 100%
  height: 100%
  background: #ffffff
  opacity: 0

// ---------------------------------------------------------------------------
// 疑似クラス（hover,activなど）
// ---------------------------------------------------------------------------
._hover_effect:hover,
.c_button_icon:focus-visible ._hover_effect
  opacity: 0.15

.c_button_icon:active ._hover_effect
  opacity: 0.22
</style>
