<template>
  <div class="shadow-container">
    <img class="lt" src="@/assets/lt.png" alt="" />
    <img class="rt" src="@/assets/rt.png" alt="" />
    <img class="rb" src="@/assets/rb.png" alt="" />
    <img class="lb" src="@/assets/lb.png" alt="" />
    <slot />
  </div>
</template>
<script>
export default {
  name: "ShadowContainer",
};
</script>
<style lang="less" scoped>
.shadow-container {
  position: relative;
  border-radius: 10px;
  padding: 20px;
  border: 2px solid;
  background: linear-gradient(
    0deg,
    rgba(4, 79, 129, 0.1) 0%,
    rgba(15, 60, 89, 0.35) 28%,
    #0b2950 100%
  );
  border-image: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0),
      rgba(7, 35, 65, 0.8),
      rgba(25, 85, 117, 0.8),
      rgba(15, 149, 212, 0.8)
    )
    2 2;
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}

.lt,
.lb,
.rb,
.rt {
  position: absolute;
  width: 20px;
  height: 20px;
}
.lt {
  top: -2px;
  left: -2px;
}
.lb {
  left: -2px;
  bottom: -2px;
}
.rb {
  right: -2px;
  bottom: -2px;
}
.rt {
  right: -2px;
  top: -2px;
}

.shadow-container::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: 2px;
  left: -2px;
  border-radius: 6px;
  border-top: 2px solid;
  border-color: rgba(15, 149, 212, 0.8);
  pointer-events: none;
}
</style>