<template>
  <code>
    <slot />
  </code>
</template>

<style lang="ts" scoped>
css({
  code: {
    overflow: "hidden",
    color: "{prose.code-inline.color}",
    backgroundColor: "{prose.code-inline.background-color}",
    borderRadius: "{prose.code-inline.border-radius}",
    padding: "{prose.code-inline.padding.default}",
    fontSize: "{prose.code-inline.font-size}",
    fontWeight: "{prose.code-inline.font-weight}"
  },
  "tbody code": {
    fontSize: "{prose.code-inline.font-size}"
  },
  a: {
    overflow: "hidden",
    code: {
      color: "{prose.a.color}",
      fontWeight: "{prose.a.font-weight}"
    }
  },
  "h1 a, h2 a, h3 a, h4 a": {
    code: {
      color: "inherit !important",
      fontSize: "inherit !important",
      backgroundColor: "{prose.code-inline.background-color} !important",
      borderRadius: "{prose.code-inline.border-radius} !important",
      padding: "{prose.code-inline.padding.default} !important"
    }
  }
})
</style>
