@use 'valaxy/client/styles/mixins/index.scss' as *;

// use common code styles, you also can override them or copy/modify them
@use 'valaxy/client/styles/common/code.scss' as *;
@use 'valaxy/client/styles/common/markdown.scss' as *;

@use 'valaxy/client/styles/components/code.scss' as *;
@use 'valaxy/client/styles/components/code-group.scss' as *;
@use 'valaxy/client/styles/components/custom-block.scss' as *;

.markdown-body {
  --c-toc-link: var(--va-c-text-light);
}

html.dark {
  .markdown-body {
    --c-toc-link: var(--va-c-text-dark);
  }
}

.markdown-body {
  padding-top: 0.5rem;
  word-wrap: break-word;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--va-font-family-base);
    font-weight: 900;
  }

  ul {
    li > p {
      margin-bottom: 0;
    }
  }

  blockquote {
    margin: 16px 0;
    border-left: 4px solid var(--va-c-divider);
    padding-left: 12px;
    transition: border-color 0.5s p {
      margin: 0;
      font-size: 16px;
      color: var(--vp-c-text-2);
      transition: color 0.5s;
    }
  }

  code:not(pre > code) {
    color: var(--va-c-text-code);
    background-color: var(--va-c-bg-mute);
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.85em;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }
  }
}