<template>
  <div class="simple_card">
    <div class="top_corner_mark"/>
    <div class="bottom_corner_mark"/>
    <div class="card_content">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: "SimpleCard"
};
</script>

<style scoped>

.simple_card {
  position: relative;
  margin: 0;
  background-color: var(--card-background-color);
  border: 0.05rem solid var(--card-border1-color);
}

.top_corner_mark {
  position: absolute;
  height: 10px;
  width: 100%;
}

.top_corner_mark::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  height: 10px;
  width: 10px;
  border-top: 2px solid var(--card-border2-color);
  border-left: 2px solid var(--card-border2-color);
}

.top_corner_mark::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  height: 10px;
  width: 10px;
  border-top: 2px solid var(--card-border2-color);
  border-right: 2px solid var(--card-border2-color);
}

.bottom_corner_mark {
  position: absolute;
  bottom: 0;
  height: 10px;
  width: 100%;
}

.bottom_corner_mark::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  height: 10px;
  width: 10px;
  border-bottom: 2px solid var(--card-border2-color);
  border-left: 2px solid var(--card-border2-color);
}

.bottom_corner_mark::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  height: 10px;
  width: 10px;
  border-bottom: 2px solid var(--card-border2-color);
  border-right: 2px solid var(--card-border2-color);
}

.card_content {
  height: 100%;
  width: 100%;
  padding: 0.5rem;
}

</style>
