<template>
  <div class="btn-container">
    <img class="btn-img" src="../assets/images/gesture/light-btn-bg.png" />
    <div class="btn-text light-button-text">{{text}}</div>
    <slot name="body"></slot>
  </div>
</template>

<script >
import { defineProps, reactive } from "vue";

// defineProps({
//   msg: String
// });
export default {
  data() {
    return {};
  },
  props: ["text"],
  methods: {
    confirm() {
      this.$emit("update:confirm", { type: "confirm" });
    },
    cancel() {
      this.$emit("update:confirm", { type: "cancel" });
    }
  }
};
</script>

<style lang="scss" scoped>
@media only screen and (min-width: 750px) {
  .btn-container {
    width: 436px;
    height: 77.7px;
    line-height: 77.7px;
  }
  .btn-text {
    width: 100%;
    text-align: center;
    font-size: 44px;
    letter-spacing: 0.2em;
    font-weight: bold;
  }
  .btn-img {
    width: 100%;
    height: 100%;
  }
  .btn-container {
    position: relative;
    color: #ffffff;
    img,
    div,
    button {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .light-button-text {
    letter-spacing: 0.2em;
  }
}
@media screen and (max-width: 750px) {
  .btn-container {
    width: 5.8133rem;
    height: 1.036rem;
    line-height: 1.036rem;
  }
  .btn-text {
    width: 100%;
    text-align: center;
    font-size: 0.5867rem;
    letter-spacing: 0.2em;
    font-weight: bold;
  }
  .btn-img {
    width: 100%;
    height: 100%;
  }
  .btn-container {
    position: relative;
    color: #ffffff;
    img,
    div,
    button {
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .light-button-text {
    letter-spacing: 0.2em;
  }
}
</style>
