<template>
  <div class="quickfacts" :class="{ open: isExpanded }">
    <h4 class="quickfacts__head" @click.prevent="toggle">Quickfacts</h4>

    <div class="quickfacts__list">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
    };
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

<style lang="scss">
@import "@scss/base.scss";

.quickfacts {
  border-radius: 1em;
  overflow: hidden;
  margin: 1em 0;
  position: relative;

  &:before {
    position: absolute;
    content: "";
    display: block;

    top: 1em;
    right: 1em;

    transform: rotate(180deg);
    transition: 0.3s all ease-in-out;

    border: {
      right: 0.625em solid transparent;
      bottom: 0.625em solid #fff;
      left: 0.625em solid transparent;
    }
  }

  &.open {
    .quickfacts__head {
      background-color: $bg-color-light;
    }

    .quickfacts__list {
      max-height: 17em;
      padding: 1.5rem;
    }

    &:before {
      transform: rotate(0deg);
    }
  }

  &__head {
    background-color: $bg-color-dark;
    margin: 0;
    border: 0;
    padding: 0.75rem 1.5rem;
    transition: 0.3s all ease-in-out;
    cursor: pointer;
  }

  &__list {
    background-color: rgba($bg-color-dark, 0.5);
    max-height: 0em;
    padding: 0 1.5rem;
    transition: 0.3s all ease-in-out;

    ul {
      margin: 0;
      padding-left: 1.25em;
    }
  }
}
</style>
