<template>
  <div
    class="solution"
    data-cy="solution">
    <a
      class="solution__toggle"
      data-cy="show-solution"
      @click="toggle">Lösung
      <template v-if="!visible">anzeigen</template>
      <template v-else>ausblenden</template>
    </a>
    <transition name="fade">
      <p
        class="solution__text solution-text fade"
        data-cy="solution-text"

        v-if="visible"
        v-html="value.text"/>
    </transition>
  </div>
</template>

<script>
  export default {
    props: ['value'],

    data() {
      return {
        visible: false,
      };
    },

    methods: {
      toggle() {
        this.visible = !this.visible;
      },
    },
  };
</script>

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

  .solution {
    display: grid;
    grid-auto-rows: auto;
    grid-row-gap: 15px;

    margin-bottom: 1rem;

    &__toggle {
      font-family: $sans-serif-font-family;
      color: $color-silver-dark;
      font-size: toRem(15px);
      /*margin-bottom: 15px;*/
      display: block;
      cursor: pointer;
      font-weight: $font-weight-regular;
    }

    &__text {
      font-size: toRem(18px);
      color: $color-silver-dark;

      /deep/ p {
        font-size: toRem(18px);
        color: $color-silver-dark;
      }

      /deep/ ul {
        padding-left: $medium-spacing;
        > li {
          list-style: disc outside none;
        }
      }
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .3s;
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
</style>
