/* stylelint-disable-next-line at-rule-no-unknown */
@use 'sass:math';

/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@import '@/utils/styles';

.markdown {
  @apply prose text-black max-w-none;

  font-size: calculate-rem(17px);

  // Styles for when the Markdown content is placeholder text.
  &.placeholder {
    @apply text-hub-gray-500;
  }

  code {
    @apply text-base font-normal p-sds-xxs;
    background: theme('colors.hub-gray.100');

    &::before,
    &::after {
      content: '';
    }
  }

  h2 {
    /*
      The designs requires a 35px margin between the heading and the top of
      the viewport when scrolling to a heading.

      TODO There's currently no support for this in Safari yet. We'll need to
      implement a solution in TypeScript.
      https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
    */
    scroll-margin-top: #{math.div(35px, 16px)}rem;
  }

  pre {
    // The Tailwind prose class adds a background around pre elements.
    background: none;
  }

  img {
    /*
      Make images inline in markdown. By default, Tailwind will set all `img`
      tags to `display: block`:
      https://tailwindcss.com/docs/preflight#images-are-block-level.

      We don't want this for markdown because it affects rendering of markdown
      badges. Usually devs will include a bunch of badges together at the top
      of the file. If all of the images are `display: block` by default, the
      badges get rendered as a column instead of as row.

      Also, having images rendered as blocks in markdown is redundant because
      the markdown renderer will automatically wrap the image in a <p> tag to
      ensure that the image is displayed as a block.
    */
    @apply inline;

    // Remove extra margin added by prose.
    @apply m-0;
  }

  ul > li::before {
    @apply bg-black;
  }

  a {
    @apply text-black;

    font-weight: unset;
  }
}
