<template>
  <div class="bookmark-tile" @click="click">
      <font-awesome-icon icon="external-link-alt"/>
      {{bookmark.bookmarkName}}
  </div>
</template>

<script>
export default {
  props: ["bookmark"],
  methods: {
    click() {
      this.$emit("clicked", this.bookmark);
    },
  },
};
</script>

<style>
.bookmark-tile {
  padding: 5px 25px;
  border-radius: 5px;
  transition: all 0.2s;
}

.bookmark-tile, .bookmark-tile svg {
  cursor: pointer;
  font-size: 16px;
  color: #ccc;
}
.lightMode .bookmark-tile, .lightMode .bookmark-tile svg {
  color: #222;
 }

.bookmark-tile:hover, .bookmark-tile:hover svg {
  transition: all 0.2s;
  background: rgba(0,0,0,0.25);
  color: #fff;
}

.lightMode .bookmark-tile:hover, .lightMode .bookmark-tile:hover svg {
  background: rgba(255,255,255,0.25);
  color: #222;
}


</style>
