<template>
  <div class="add-content">
    <a class="add-content__button" v-on:click="addContentBlock">
      <add-pointer class="add-content__icon"></add-pointer>
    </a>
  </div>
</template>

<script>
  import AddPointer from '@/components/icons/AddPointer';

  export default {
    props: ['after', 'parent'],

    components: {
      AddPointer
    },

    methods: {
      addContentBlock() {
        this.$store.dispatch('addContentBlock', {
          after: this.after,
          parent: this.parent
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .add-content {
    display: none;
    @include desktop {
      display: flex;
    }

    justify-content: flex-end;

    &__button {
      margin-right: -85px;
      cursor: pointer;
      display: inline-grid;
    }

    &__icon {
      width: 40px;
      fill: $color-silver-dark;
    }
  }
</style>
