<template>
  <div v-html="html" />
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class Message extends Vue {
  @Prop({ required: true })
  private readonly html!: string;
}
</script>

<style lang="scss" scoped>
div:deep() {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol {
    font-family: "Neue Praxis", sans-serif !important;
    margin-bottom: 0.4rem;
  }

  p {
    text-align: justify;
    hyphens: auto;
    margin-bottom: 0.4rem;
  }

  h1,
  h2,
  h3 {
    font-weight: normal;
  }

  h4,
  h5,
  h6 {
    font-weight: bold;
  }
}
</style>