<template>
  <div class="contrast_card" ref="contrastCard">
    <div class="top_border"></div>
    <div class="top_side_dot"/>
    <div class="bottom_side_dot"/>
    <div class="bottom_border"></div>
    <div class="card_content">
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: "ContrastCard",
  props: {
    mouseHand: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.$refs.contrastCard.style.cursor = this.$props.mouseHand ? "pointer" : "default"
  }
};
</script>

<style scoped>

.contrast_card {
  position: relative;
  background-color: var(--card-background-color);
}

.top_border {
  height: 33%;
  border-top: 2px solid var(--card-border1-color);
  border-left: 2px solid var(--card-border1-color);
  border-right: 2px solid var(--card-border1-color);
}

.top_side_dot {
  position: relative;
  height: 17%;
}

.top_side_dot::before {
  content: "";
  position: absolute;
  left: -2px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--card-border2-color);
}

.top_side_dot::after {
  content: "";
  position: absolute;
  right: -2px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--card-border2-color);
}

.bottom_side_dot {
  position: relative;
  height: 17%;
}

.bottom_side_dot::before {
  content: "";
  position: absolute;
  left: -2px;
  bottom: 0;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--card-border2-color);
}

.bottom_side_dot::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 0;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--card-border2-color);
}

.bottom_border {
  height: 33%;
  border-left: 2px solid var(--card-border1-color);
  border-right: 2px solid var(--card-border1-color);
  border-bottom: 2px solid var(--card-border1-color);
}

.card_content {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  padding: 0.5rem;
}

</style>
