<template>
  <div :class="[$style.wrapper, $style['font-'+fontStyle],{[$style.arrowHide]: arrowDisplay}]" @click="onClick">
    <slot></slot>
    <span :class="$style.wrapper_span"></span>
  </div>
</template>

<script>
export default {
  date () {
    return {
      isActive: false
    }
  },
  props: {
    fontStyle: {
      type: String,
      default: ''
    },
    arrowDisplay: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onClick () {
      this.$emit('click')
    }
  }
  // methods: {
  //   onclick () {
  //     const openSelect = document.getElementById(this.openSelect)
  //     openSelect.classList.toggle('show')
  //   }
  // }
}
</script>

<style module lang="scss">

.wrapper {
  letter-spacing: 0.04em;
  /* font-weight: bold; */
  line-height: 1.5;
  margin-top:1rem;

  @include mq-pc {
    /* font-size: 1.3rem; */
    margin: 2rem 0 1rem 0;
    // font-weight: bold;
  }

  @include mq-sp {
    font-size: 1.6rem;
    margin: 0.8rem 0 0 0;
    // padding: 1.6rem 2rem;
    padding: 1.6rem 2rem;
    border-radius: 4px;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: auto;
      bottom: auto;
      right: 1em;
      /* transform: translateY(-50%); */
      background-image: url("~assets/images/shared/arrow-select-down.svg");
      width: .8em;
      height: .8em;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      transition: transform .3s ease;
      transform-origin: center center;
      position: absolute;
      right: 1.8rem;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.font-small {
  font-size: 1.3rem;
}
.font-bold {
  font-weight: bold;
}

@include mq-sp {
  .wrapper {
    background-color: #fff;
  }
  .wrapper.active .wrapper::after {
    transform: translateY(-50%) rotate(180);
  }
  .wrapper.arrowHide {
    &::after {
      background-image: none;
    }
  }
}
</style>
