@require '~@theme/styles/fonts/crimson.css'
@require '~@mr-hope/vuepress-shared/styles/wrapper'

html, body
  padding 0
  margin 0
  background var(--bgcolor)

body
  font-family Georgia Pro, Crimson, Georgia, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', STHeiti, 'Microsoft YaHei', SimSun, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-display optional
  font-size 16px
  color var(--text-color)
  min-height 100vh
  -webkit-tap-highlight-color transparent

{$contentClass}:not(.custom)
  @extend $wrapper

  > *:first-child
    margin-top $navbarHeight

  a:hover
    text-decoration underline

  // unknow container
  p.demo
    padding 1rem 1.5rem
    border 1px solid #ddd
    border-radius 4px

  img
    max-width 100%

{$contentClass}.custom
  padding 0
  margin 0

  img
    max-width 100%

a
  font-weight 500
  color var(--accent-color)
  text-decoration none
  overflow-wrap break-word

p a code
  font-weight 400
  color var(--accent-color)

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size 1rem
  color var(--light-grey)
  border-left 0.2rem solid #dfe2e5
  margin 1rem 0
  padding 0.25rem 0 0.25rem 1rem

  & > p
    margin 0

ul, ol
  padding-left 1.2em

strong
  font-weight 600

h1, h2, h3, h4, h5, h6
  font-weight 500
  line-height 1.25

  {$contentClass}:not(.custom) > &
    margin-top 0.5rem - $navbarHeight
    padding-top: ($navbarHeight + 1rem)
    margin-bottom 0.5rem

    &:first-child
      margin-top -3rem
      margin-bottom 1rem

      + p, + pre, + .custom-block
        margin-top 2rem

  &:hover .header-anchor
    opacity 1

p
  {$contentClass}:not(.custom) > &, {$contentClass}:not(.custom) > ul &, {$contentClass}:not(.custom) > ol &
    text-align justify
    word-break break-word
    hyphens auto
    overflow-wrap break-word

    @media (max-width $MQMobileNarrow)
      text-align left

h1
  font-size 2rem

h2
  font-size 1.65rem
  padding-bottom 0.3rem
  border-bottom 1px solid var(--border-color)

h3
  font-size 1.35rem

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0
  transition opacity 0.2s

  &:hover
    text-decoration none

code, kbd, .line-number
  font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace

p, ul, ol
  line-height 1.7

hr
  border 0
  border-top 1px solid var(--border-color)

table
  border-collapse collapse
  margin 1rem 0
  display block
  overflow-x auto

tr
  border-top 1px solid #dfe2e5

  &:nth-child(2n)
    background #f6f8fa

th, td
  border 1px solid var(--grey14)
  padding 0.6em 1em

.theme-dark
  tr:nth-child(2n)
    background #252322

  th, td
    border 1px solid var(--grey12)
