<script setup lang="ts">
defineProps({
  /**
   * パターン
   * @example 2
   */
  pattern: { type: Number, default: 1 },
  /**
   * カラーホワイト
   * @example white
   */
  white: { type: Boolean, default: false },
  /**
   * パターン2中央の円の背景色を設定　※カラーコードを設定してください
   */
  centerCircleBgColor: { type: String, default: '#ffffff' }
})
</script>

<template>
  <div
    class="_box"
    :class="{
      _pattern2_box: pattern === 2 && !white,
      _pattern2_box_color_white: pattern === 2 && white
    }"
  >
    <div
      v-show="pattern === 2"
      class="_pattern2_item"
      :class="{ _color_primary: !white, _color_white: white }"
    />
    <div
      v-show="pattern === 2"
      class="_pattern2_center_circle"
      :style="{ background: centerCircleBgColor }"
    />

    <div
      class="_item_common _item1"
      :class="{
        _color_primary: !white,
        _color_white: white,
        _pattern1_common: pattern === 1,
        _pattern1_item1: pattern === 1,
        _pattern3_common: pattern === 3,
        _pattern3_item1: pattern === 3
      }"
    />
    <div
      class="_item_common _item2"
      :class="{
        _color_primary: !white,
        _color_white: white,
        _pattern1_common: pattern === 1,
        _pattern1_item2: pattern === 1,
        _pattern3_common: pattern === 3,
        _pattern3_item2: pattern === 3
      }"
    />
    <div
      class="_item_common _item3"
      :class="{
        _color_primary: !white,
        _color_white: white,
        _pattern1_common: pattern === 1,
        _pattern1_item3: pattern === 1,
        _pattern3_common: pattern === 3,
        _pattern3_item3: pattern === 3
      }"
    />
    <div
      class="_item_common _item4"
      :class="{
        _color_primary: !white,
        _color_white: white,
        _pattern1_common: pattern === 1,
        _pattern1_item4: pattern === 1,
        _pattern3_common: pattern === 3,
        _pattern3_item4: pattern === 3
      }"
    />
    <div
      class="_item_common _item5"
      :class="{
        _color_primary: !white,
        _color_white: white,
        _pattern1_common: pattern === 1,
        _pattern1_item5: pattern === 1,
        _pattern3_common: pattern === 3,
        _pattern3_item5: pattern === 3
      }"
    />
    <div
      class="_item_common _item6"
      :class="{
        _color_primary: !white,
        _color_white: white,
        _pattern1_common: pattern === 1,
        _pattern1_item6: pattern === 1,
        _pattern3_common: pattern === 3,
        _pattern3_item6: pattern === 3
      }"
    />
    <div
      class="_item_common _item7"
      :class="{
        _color_primary: !white,
        _color_white: white,
        _pattern1_common: pattern === 1,
        _pattern1_item7: pattern === 1,
        _pattern3_common: pattern === 3,
        _pattern3_item7: pattern === 3
      }"
    />
    <div
      class="_item_common _item8"
      :class="{
        _color_primary: !white,
        _color_white: white,
        _pattern1_common: pattern === 1,
        _pattern1_item8: pattern === 1,
        _pattern3_common: pattern === 3,
        _pattern3_item8: pattern === 3
      }"
    />
  </div>
</template>

<style lang="sass" scoped>
._box
  position: relative
  width: 38px
  height: 38px
  border-radius: 50%

._pattern2_box
  background: rgb(var(--c-primary-rgb), 0.2)
  animation: pattern2 1s linear infinite

._pattern2_box_color_white
  background: rgb(255, 255, 255, 0.2)
  animation: pattern2 1s linear infinite

._item_common
  position: absolute
  transition: 0.3s

._color_primary
  background: var(--c-primary)

._color_white
  background: #ffffff

._pattern1_common
  height: 9px
  width: 3px

._pattern3_common
  height: 6px
  width: 6px
  border-radius: 50%

// pattern1のアイテムデザイン
._pattern1_item1
  top: 0
  left: 50%
  transform: translateX(-50%)
  -webkit-transform: translateX(-50%)
  -ms-transform: translateX(-50%)

._pattern1_item2
  top: 12%
  right: 17%
  transform: rotate(45deg)
  -webkit-transform: rotate(45deg)
  -ms-transform: rotate(45deg)

._pattern1_item3
  top: 40%
  right: 6%
  transform: rotate(90deg)
  -webkit-transform: rotate(90deg)
  -ms-transform: rotate(90deg)

._pattern1_item4
  right: 20%
  bottom: 12%
  transform: rotate(135deg)
  -webkit-transform: rotate(135deg)
  -ms-transform: rotate(135deg)

._pattern1_item5
  bottom: 0
  left: 50%
  transform: translateX(-50%)
  -webkit-transform: translateX(-50%)
  -ms-transform: translateX(-50%)

._pattern1_item6
  bottom: 12%
  left: 20%
  transform: rotate(225deg)
  -webkit-transform: rotate(225deg)
  -ms-transform: rotate(225deg)

._pattern1_item7
  top: 40%
  left: 8%
  transform: rotate(270deg)
  -webkit-transform: rotate(270deg)
  -ms-transform: rotate(270deg)

._pattern1_item8
  top: 12%
  left: 20%
  transform: rotate(315deg)
  -webkit-transform: rotate(315deg)
  -ms-transform: rotate(315deg)

// pattern2のアイテムデザイン
._pattern2_item
  height: 19px
  width: 19px
  border-top-left-radius: 100%

._pattern2_center_circle
  height: 28px
  width: 28px
  border-radius: 50%
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  -webkit-transform: translate(-50%, -50%)
  -ms-transform: translate(-50%, -50%)

// pattern3のアイテムデザイン
._pattern3_item1
  top: 0
  left: 50%
  transform: translateX(-50%)
  -webkit-transform: translateX(-50%)
  -ms-transform: translateX(-50%)

._pattern3_item2
  top: 12.5%
  right: 12.5%
  transform: translateX(-12.5%)
  -webkit-transform: translateX(-12.5%)
  -ms-transform: translateX(-12.5%)

._pattern3_item3
  top: 50%
  right: 0%
  transform: translateY(-50%)
  -webkit-transform: translateY(-50%)
  -ms-transform: translateY(-50%)

._pattern3_item4
  right: 12.5%
  bottom: 12.5%
  transform: translateX(-12.5%)
  -webkit-transform: translateX(-12.5%)
  -ms-transform: translateX(-12.5%)

._pattern3_item5
  bottom: 0
  left: 50%
  transform: translateX(-50%)
  -webkit-transform: translateX(-50%)
  -ms-transform: translateX(-50%)

._pattern3_item6
  bottom: 12.5%
  left: 17.5%
  transform: translateX(-17.5%)
  -webkit-transform: translateX(-17.5%)
  -ms-transform: translateX(-17.5%)

._pattern3_item7
  top: 50%
  left: 0%
  transform: translateY(-50%)
  -webkit-transform: translateY(-50%)
  -ms-transform: translateY(-50%)

._pattern3_item8
  top: 12.5%
  left: 17.5%
  transform: translateX(-17.5%)
  -webkit-transform: translateX(-17.5%)
  -ms-transform: translateX(-17.5%)

// パターン1・3アニメーション
._item1
  animation: item1 0.8s linear infinite
@keyframes item1
  0%
    opacity: 1
  76%
    opacity: 0
  100%
    opacity: 0

._item2
  animation: item2 0.8s linear infinite
  animation-delay: 0.1s
  opacity: 0
@keyframes item2
  0%
    opacity: 1
  76%
    opacity: 0
  100%
    opacity: 0

._item3
  animation: item3 0.8s linear infinite
  animation-delay: 0.2s
  opacity: 0
@keyframes item3
  0%
    opacity: 1
  76%
    opacity: 0
  100%
    opacity: 0

._item4
  animation: item4 0.8s linear infinite
  animation-delay: 0.3s
  opacity: 0
@keyframes item4
  0%
    opacity: 1
  76%
    opacity: 0
  100%
    opacity: 0

._item5
  animation: item5 0.8s linear infinite
  animation-delay: 0.4s
  opacity: 0
@keyframes item5
  0%
    opacity: 1
  76%
    opacity: 0
  100%
    opacity: 0

._item6
  animation: item6 0.8s linear infinite
  animation-delay: 0.5s
  opacity: 0
@keyframes item6
  0%
    opacity: 1
  76%
    opacity: 0
  100%
    opacity: 0

._item7
  animation: item7 0.8s linear infinite
  animation-delay: 0.6s
  opacity: 0
@keyframes item7
  0%
    opacity: 1
  76%
    opacity: 0
  100%
    opacity: 0

._item8
  animation: item8 0.8s linear infinite
  animation-delay: 0.7s
  opacity: 0
@keyframes item8
  0%
    opacity: 1
  76%
    opacity: 0
  100%
    opacity: 0

// パターン2アニメーション
@keyframes pattern2
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)
</style>
