<template>
  <div class="normal-box" :class="{ 'box-glow': isBorderActive }">
    <div class="content-box">
      <slot></slot>
    </div>

  </div>
</template>

<script setup>
const props = defineProps({
  isBorderActive: {
    type: Boolean,
    default: false,
  }
})

</script>


<style lang="scss" scoped>
.normal-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  // border: 2px solid var(--bg-black-5);
  background: var(--color-primary-2);

  .content-box {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }

}

/* 霓虹发光效果变体 */
.box-glow {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 16px;
  // background: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: var(--bg-black-5);
  // border: 2px solid transparent !important;
  border: none;

  .content-box {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }
}

.box-glow::before {
  content: '';
  position: absolute;
  width: 150%;
  height: 250%;
  background: conic-gradient(from 0deg,
      #85B2FF 0deg 180deg,
      #B685FF 180deg 360deg);
  animation: rotate 3s linear infinite;
  filter: blur(10px);
}

.box-glow::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 12px;
}

// .glow-layer {
//   position: absolute;
//   inset: -2px;
//   background: conic-gradient(from 0deg,
//       #85B2FF 0deg 180deg,
//       #B685FF 180deg 360deg);
//   animation: rotate 3s linear infinite;
//   filter: blur(20px);
//   opacity: 0.5;
// }
</style>
