<template>
  <ul :class="[$style.wrapper,$style['size-'+size]]">
    <li v-for="(tag, index) in tags" :key="index" :class="$style.item">
      {{ tag }}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    tags: {
      type: Array,
      default: () => [
        'メロディ',
        '楽器パート'
      ]
    },
    size: {
      type: String,
      default: 'default',
      validator (value) {
        return ['small', 'default'].includes(value)
      }
    }
  }
}
</script>

<style module lang="scss">

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.item {
  position: relative;
  text-decoration: none;
  color: #2f2f33;
  padding-left: 1.7em;
  // margin-right: 1.1em;
}
/* .m-postTag li:last-child a {
  margin-right: 0;
} */
.item:before {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background-image: url("~assets/images/shared/icon-tag-blue.svg");
  width: 1.2em;
  height: 1.3em;
}
.item:nth-child(odd):before {
  background-image: url("~assets/images/shared/icon-tag-green.svg");
}
/* .m-postTag li.icon01 a:before {
  background-image: url("~assets/images/shared/icon-tag-green.svg");
}
.m-postTag li.icon02 a:before {
  background-image: url("~assets/images/shared/icon-tag-blue.svg");
} */
/* pc */
@include mq-pc {
  .item{
    font-size: 14px;
  }

  .size-small{

  }
  .size-small .item{
      font-size: 1rem;
    /* padding: .3rem .5rem .3rem 3rem; */
  }

  /* .m-postTag.-small {
    margin: 0 18px 0 18px;
    font-size: 13px;
  }
  .m-postTag.-small li a {
    padding-left: 24px;
    margin-right: 15px;
  }
  .m-postTag.-medium {
    font-size: 14px;
  }
  .m-postTag.-medium li a {
    padding-left: 25px;
    margin-right: 25px;
  } */
}

/* sp */
@include mq-sp {
  .wrapper {
    font-size: 1.2rem;
  }

}

</style>
