---
interface Props {
    class: string;
}
const className = Astro.props.class;
---
<div class=`prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md ${className}`>
    <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
    <!--<div class="max-w-none custom-md">-->
    <slot />
</div>

<style lang="stylus" is:global>
  .custom-md
    a
      position: relative
      background: none
      margin: -4px
      padding: 4px
      border-radius: 6px
      color: var(--primary)
      text-decoration-line: none;
      /*&:after*/
      /*  content: ''*/
      /*  position: absolute*/
      /*  left: 2px*/
      /*  right: 2px*/
      /*  bottom: 4px*/
      /*  height: 6px*/
      /*  border-radius: 3px*/
      /*  background: var(--link-hover)*/
      /*  transition: background 0.15s ease-in-out;*/
      /*  z-index: -1;*/
      &:hover
        background: var(--link-hover)
      &:active
        background: var(--link-active)
    /*&:after*/
    /*  background: var(--link-active)*/
    code
      font-family: monospace
      background: var(--inline-code-bg)
      color: var(--inline-code-color)
      padding: 2px 4px
      border-radius: 4px
      overflow: hidden
      &:before
        content: none
      &:after
        content: none
    pre
      background: var(--codeblock-bg) !important
      border-radius: 12px
      padding-left: 20px
      padding-right: 20px
      code
        padding: 0
        background: none
        ::selection
          background: var(--codeblock-selection)
        span.br::selection
          background: var(--codeblock-selection)
    ul
      li
        &::marker
          color: var(--primary)
    ol
      li
        &::marker
          color: var(--primary)
    blockquote
      font-style: normal
      font-weight: inherit
      border-left-color: rgba(0,0,0,0)
      position: relative;
      &:before
        content: ''
        position: absolute
        left: -0.25rem
        display: block
        transition: background 0.15s ease-in-out;
        background: var(--btn-regular-bg)
        height: 100%
        width: 0.25rem
        border-radius: 1rem
      p
        &:before
          content: none
        &:after
          content: none
    img
      border-radius: 12px
    hr
      border-color: var(--line-divider)
      border-style: dashed
    iframe
      border-radius: 12px
      margin-left: auto
      margin-right: auto
      max-width: 100%
</style>