<template>
  <blockquote class="empty:before:hidden ps-4 my-4 relative before:absolute before:-top-1 before:-bottom-1 before:left-0 before:w-1 before:bg-light-30 dark:before:bg-dark-30" ref="el">
    <slot />
  </blockquote>
</template>

<style>
.HyperMD-quote
{
  @apply before:hidden;
}
.HyperMD-quote.hmd-inactive-line
{
  @apply before:block empty:before:!hidden !pb-2 !ps-4 !relative before:!absolute before:!-top-1 before:!-bottom-1 before:!left-0 before:!w-1 before:!bg-none before:!bg-light-30 dark:before:!bg-dark-30;
}
.HyperMD-quote.HyperMD-header
{
  @apply before:!hidden;
}
.hmd-inactive-line .cm-formatting-quote
{
  @apply !hidden;
}
.cm-quote 
{
  @apply text-light-100 dark:text-dark-100;
}
</style>