<script setup lang="ts">
defineProps<{ id: string }>()
</script>

<template>
  <h4 :id="id">
    <NuxtLink :id="id">
      <slot />
    </NuxtLink>
  </h4>
</template>

<style lang="ts" scoped>
/* TODO */
/* @apply scroll-mt-[calc(var(--header-height)+4.5rem)] sm:scroll-mt-[calc(var(--header-height)+2rem)]; */e
css({
  h4: {
    color: "{prose.h4.color}",
    margin: "{prose.h4.margin.default}",
    fontSize: "{prose.h4.font-size}",
    fontWeight: "{prose.h4.font-weight}",
    lineHeight: "{prose.h4.line-height}"
  },
  "h4 + *": { marginTop: "0" },
  "h4 > a": {
    position: "relative",
    "&:before": {
      position: "absolute",
      top: "0",
      left: "2px",
      height: "calc(100%+2px)",
      width: "calc(100%-4px)",
      content: "''"
    },
    "&:hover": {
      "&:before": { borderBottom: "{prose.h4.hover.border.bottom}" },
      "&:after": {
        position: "absolute",
        right: "1.25rem",
        height: "0.75rem",
        width: "0.75rem",
        content:
          "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='#000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'/%3E%3C/svg%3E\")"
      }
    }
  },
  ".dark h4 > a:hover::after": {
    content:
      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='#fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'/%3E%3C/svg%3E\")"
  }
})
</style>
