::selection
  background: $primary
  color: $white

*
  box-sizing: border-box

::placeholder
  color: $dark
  opacity: 0.3

  &:focus
    outline: 0

html
  direction: $dir
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
  font-weight: $font-weight-normal

a
  color: $link
  cursor: pointer
  text-decoration: none

  &:hover
    color: $link-hover

img
  max-width: 100%
  height: auto

li + li
  margin-top: 0.25em

p, dl, ol, ul, blockquote, pre
  font-size: 1em

  &:not(:last-child)
    margin-bottom: 1em

blockquote
  border-{$dir-start}: 0.5em solid $primary
  padding: $padding
  margin: 0

ol
  list-style: decimal outside
  margin-{$dir-start}: 1em
  margin-top: 1em
  padding-{$dir-start}: 1em

ul
  list-style: disc outside
  margin-{$dir-start}: 1em
  margin-top: 1em
  padding-{$dir-start}: 1em

  ul
    list-style-type: circle
    margin-top: 0.5em

    ul
      list-style-type: square

dd
  margin-{$dir-start}: 2em

figure
  margin-left: 2em
  margin-right: 2em
  text-align: center

  &:not(:first-child)
    margin-top: 2em

  &:not(:last-child)
    margin-bottom: 2em

  img
    display: inline-block

  figcaption
    font-style: italic

pre
  overflow-x: auto
  padding: $padding
  white-space: pre
  word-wrap: normal