<template>
  <div
    class="add-content-element"
    @click="$emit('add-element', index)">
    <add-icon class="add-content-element__icon"/>
  </div>
</template>

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

  export default {
    props: ['index'],

    components: {
      AddIcon
    }
  };
</script>

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

  .add-content-element {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid $color-silver-dark;
    margin-bottom: 21px + 25px;
    cursor: pointer;

    &__icon {
      width: 40px;
      height: 40px;
      fill: $color-silver-dark;
      margin-bottom: -21px;
      background-color: $color-white;
      border-radius: 50px;
    }
  }
</style>
