<template>
  <div class="jg-button">
    <div class="btn btn__secondary" :class="activeClass" @click="onclick">
      <p>JgButton</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JgButton',
  data() {
    return {
      isActive: true,
      activeClass: 'active-button',
    }
  },
  methods: {
    onclick() {
      this.isActive = !this.isActive
      this.activeClass = this.isActive ? 'active-button' : ''
      console.log('eeeeeeeeeeeee =>', this.isActive)
    },
  },
}
</script>

<style lang="less" scoped>

  .jg-button {
    background-color: #E4EBF5;
  }

  .btn {
    width: 15rem;
    height: 4rem;
    border-radius: 1rem;
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
  }

  .btn__secondary {
    grid-column: 1/2;
    grid-row: 5/6;
    color: #9baacf;
  }

  .btn__secondary:hover {
    color: #6d5dfc;
  }

  .btn__secondary:active {
    box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #FFFFFF;
  }

  .active-button {
    box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #FFFFFF;
  }

  .btn p {
    font-size: 1.6rem;
  }
</style>
