<template>
  <div :class="[$style.button,{[$style.following]: following == true }, {[$style['short']]: btnWidth == 'short'}]">
    {{ following ? 'フォロー中' : 'フォローする' }}
  </div>
</template>
<script>
export default {
  props: {
    following: {
      type: Boolean,
      default: false
    },
    btnWidth: {
      type: String,
      default: '20rem',
      required: false
    }
  }
}
</script>

<style module lang="scss">

.button {
  /* min-width: 13.2rem; */
  min-width: 20rem;
  border-radius: 3.2rem;
  border: 1px rgba(47,47,51,0.5) solid;
  padding: 0.5rem 1.3rem 0.5rem 3rem;
  position: relative;
  text-align: center;
  cursor: pointer;
  transition: background-color .3s ease;
}
.button:before,
.button:after {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% auto;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 3.3rem;
}
.button:before {
  background-image: url("~assets/images/shared/icon-plus.svg");
}
.button:after {
  background-image: url("~assets/images/shared/icon-plus-white.svg");
  display: none;
}
.button.short {
  min-width: 13.4rem;
}
.button.short:before,
.button.short:after {
  left: 1.3rem;
}

.button:hover {
  background-color: #725feb;
  border: 1px #725feb solid;
  color: #fff;
}
.button:hover:before {
  display: none;
}
.button:hover:after {
  display: block;
}
.button.following:before,
.button.following:after {
  content: none;
}
.button.following {
  background-color: #725feb;
  color: #fff;
  border: 1px #725feb solid;
  padding: 0.5rem 1.3rem;
}

  @include mq-pc {
  }
  @include mq-sp {
    .button.short {
      min-width: 14rem;
    }
  }

</style>
