<template>
  <div class="card">

  <span class="corner tl"></span>
  <span class="corner tr"></span>
  <span class="corner bl"></span>
  <span class="corner br"></span>

    <slot />
  </div>
</template>

<style lang="scss" scoped>
$separation: 2px;

.card{
  position: relative;
  margin: 15px;
  background: var(--color-background-fore);
  padding: 8px 24px;
  color: white;
  border: 1px solid var(--color-border-color);
}

.corner{
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: #cfcfcf;
}

/* Top Left */
.tl{
  top: -$separation;
  left: -$separation;
  border-top:2px solid;
  border-left:2px solid;
}

/* Top Right */
.tr{
  top: -$separation;
  right: -$separation;
  border-top:2px solid;
  border-right:2px solid;
}

/* Bottom Left */
.bl{
  bottom: -$separation;
  left: -$separation;
  border-bottom:2px solid;
  border-left:2px solid;
}

/* Bottom Right */
.br{
  bottom: -$separation;
  right: -$separation;
  border-bottom:2px solid;
  border-right:2px solid;
}
</style>
