<template>
  <div :class="[$style.partSelectItem,$style.icon01,{[$style.disabled]: disabled},{[$style.parent]: part.is_parent},{[$style.noicon]: !part.icon_url}]">
    <img v-if="part.icon_url" :src="part.icon_url" :class="$style.icon" />
    {{ part.name }}<span :class="$style.number">{{ part.percent }}</span><span :class="$style.percent">%</span>
  </div>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    part: {
      type: Object,
      default: () => {
        return {
          name: 'デフォルト',
          is_parent: false,
          icon_url: require('~/assets/images/shared/icon-lyrics-black.svg'),
          percent: 10
        }
      }
    }
  }
}
</script>

<style module lang="scss">

.partSelectItem {
  background-color: #fff;
  border-radius: 0.4rem;
  font-size: 1.5rem;
  padding: 0.6rem 2rem 0.7rem 6rem;
  /* margin: 2.5rem 0 0 0; */
  display: inline-block;
  transition: background-color 0.3s linear;
  position: relative;
  cursor: pointer;
}

.partSelectItem.noicon{
  padding: 0.6rem 2rem 0.7rem 2rem;
}

.partSelectItem.disabled {
  background-color: #cbcbcf;
  color: #848488;
}
.child{
  margin:0 0 0 4.6rem;
}
.child .partSelectItem{
  margin-top: 1rem;
}

/* .partSelectItem.gray:hover {
  background-color: #725FEB;
} */
.number {
  color: #6FC9E8;
  font-family: din-2014, sans-serif;
  font-weight: 400;
  // font-size: 2rem;
  font-size: 2rem;
  margin: 0 0.2rem 0 1.9rem;
  display: inline-block;
  vertical-align: baseline;
}

.partSelectItem.parent .number {
  color: #7db3f2;
}
.partSelectItem.disabled .number {
  color: #848488;
}

.percent {
  font-size: 1.2rem;
}
.icon{
  width: 2rem;
  height: 2rem;
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2rem;
  display: block;
}

// 黒の画像を色変える
// https://isotropic.co/tool/hex-color-to-css-filter/

.icon{
filter: invert(74%) sepia(42%) saturate(558%) hue-rotate(161deg) brightness(95%) contrast(91%);
}

.parent .icon{
filter: invert(71%) sepia(5%) saturate(4914%) hue-rotate(183deg) brightness(98%) contrast(94%);
}

.disabled .icon{
filter: invert(52%) sepia(5%) saturate(287%) hue-rotate(202deg) brightness(89%) contrast(85%);
}

.disabled .icon{

}

.partSelectItem:not(.disabled):hover {
  background-color: #6FC9E8;
  color: #fff;
  .icon {
    filter: invert(98%) sepia(0%) saturate(0%) hue-rotate(38deg) brightness(102%) contrast(103%);
  }
  .number {
  color: #fff;
  }
  &.parent {
    background-color: #7db3f2;
    color: #fff;
  }
}

/* .partSelectItem.icon01:before {
  background-image: url("~assets/images/shared/icon-lyrics-blue.svg");
}
.partSelectItem.icon01:after {
  background-image: url("~assets/images/shared/icon-lyrics-white.svg");
}
.partSelectItem.icon02:before {
  background-image: url("~assets/images/shared/icon-composition-blue.svg");
}
.partSelectItem.icon02:after {
  background-image: url("~assets/images/shared/icon-composition-white.svg");
}
.partSelectItem.gray.icon01:before {
  background-image: url("~assets/images/shared/icon-lyrics-gray.svg");
}
.partSelectItem.gray.icon01:after {
  background-image: url("~assets/images/shared/icon-lyrics-white.svg");
}
.partSelectItem:after {
  display: none;
}
.partSelectItem:hover:before {
  display: none;
}
.partSelectItem:hover:after {
  display: block;
} */
.pop{
  display: block;
  margin-bottom: -0.8rem;
}
.child .pop{
  display: block;
  margin-bottom: 0.6rem;
}

</style>
