<template>
  <div class="border-box">
    <div class="edge"></div>
    <div class="edge"></div>
    <div class="edge"></div>
    <div class="edge"></div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'BorderBox',
  data() {
    return {}
  },
}
</script>

<style lang="stylus" scoped>
.border-box
  border .1rem solid $color-map(.8)
  position relative
  padding 1rem 2rem
  background-color rgba(0,0,0,.5)
  >.edge
    width 0
    height 0
    border .3rem solid $edgeColor
    position absolute
    &:nth-of-type(1)
      top 0
      left 0
      border-right-color transparent
      border-bottom-color transparent
    &:nth-of-type(2)
      top 0
      right 0
      border-left-color transparent
      border-bottom-color transparent
    &:nth-of-type(3)
      bottom 0
      left 0
      border-right-color transparent
      border-top-color transparent
    &:nth-of-type(4)
      bottom 0
      right 0
      border-left-color transparent
      border-top-color transparent
</style>
