.uie
  height 100%
  line-height var(--uie-line-height)
  font-family var(--uie-font-family-regular)
  font-weight var(--uie-font-weight-regular)
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  @media print
    font-size 10pt
  @media $mq-up_to_m
    font-size var(--uie-base-font-size-s)
  @media $mq-m_to_l
    font-size var(--uie-base-font-size-m)
  @media $mq-l_and_up
    font-size var(--uie-base-font-size-l)

  *
    margin 0
    padding 0
    border 0
    box-sizing border-box
    vertical-align baseline

  @media (prefers-reduced-motion: reduce)
    *
      animation none !important
      transition none !important

  body
    height 100%

  h1
  h2
  h3
    font-family var(--uie-font-family-bold)
    font-weight var(--uie-font-weight-bold)

  h1
    font-size var(--uie-font-size-xxxl)
    line-height var(--uie-line-height-heading)

  h2
    font-size var(--uie-font-size-xl)
    line-height var(--uie-line-height-heading)

  h3
    font-size var(--uie-font-size-l)

  h4
  h5
  h6
    font-family var(--uie-font-family-regular)
    font-size var(--uie-font-size-m)
    font-weight var(--uie-font-weight-regular)

  .intro
    font-family var(--uie-font-family-regular)
    font-size var(--uie-font-size-l)
    font-weight var(--uie-font-weight-regular)

  .intro,
  details
    color var(--uie-color-secondary-text)

  em
    font-style var(--uie-font-style-italic)
    font-weight var(--uie-font-weight-italic)

  em,
  summary
    font-family var(--uie-font-family-lightitalic)
    font-weight var(--uie-font-weight-light)

  strong
    font-family var(--uie-font-family-bold)
    font-weight var(--uie-font-weight-bold)

  em strong,
  strong em
    font-family var(--uie-font-family-bolditalic)
    font-weight var(--uie-font-weight-bold)

  table
    border-collapse collapse

    caption
      font-size var(--uie-font-size-l)
      font-family var(--uie-font-family-bold)
      font-weight var(--uie-font-weight-bold)
      text-align left
      margin-bottom var(--uie-space-m)

    th
      text-align left
      border-top 1px solid var(--uie-color-border-dark)
      border-bottom 1px solid var(--uie-color-border-dark)
      font-size var(--uie-font-size-s)
      font-family var(--uie-font-family-bold)
      font-weight var(--uie-font-weight-bold)
      color var(--uie-color-secondary-text)
      background-color var(--uie-color-bg-light)

    td
      border-bottom 1px solid var(--uie-color-border-medium)
      font-size var(--uie-font-size-s)

    th,
    td
      vertical-align middle
      padding var(--uie-space-s) var(--uie-space-m)

  hr
    border-top 1px solid var(--uie-color-border-medium)

  mark
    padding var(--uie-space-xxs) var(--uie-space-xs)
    border-radius var(--uie-space-xs)
    background-color var(--uie-color-accent-light)

  code
    code()
    font-size var(--uie-font-size-s)
    padding var(--uie-space-xxs) var(--uie-space-xs)
    border-radius var(--uie-space-xs)
    border 1px solid var(--uie-color-code-border)
    background-color var(--uie-color-code-bg)

  pre
    code()
    overflow-x auto
    // use important to override hljs styling which differs per theme
    padding var(--uie-space-m) !important
    // reset inline code styles when nested in pre
    code
      padding 0
      border 0
      border-radius 0
      background-color transparent

  select
    border 1px solid var(--uie-color-border-medium)
