[data-mfm="root"]
  background-color: $mfmBgColor
  cursor: default
  display: block
  margin: 0
  padding: 0
  overflow-wrap: break-word
  color: $mfmColor
  line-height: 1.5em

  *
    background-clip: padding-box

  [data-mfm="bold"],
  [data-mfm="big"],
  b, .b
    font-weight: bold

  [data-mfm="strike"],
  del, .del
    text-decoration: line-through

  [data-mfm="i"],
  i, .i
    font-style: oblique

  [data-mfm="small"],
  small, .small
    font-size: smaller

  [data-mfm="inlineCode"],
  code[data-mfm="inlineCode"]:not([data-mfm^="math"])
    display: inline-block
    border-radius: 2px
    line-height: 1.171875em

  [data-mfm="blockCode"],
  pre
    display: block
    overflow: auto
    white-space: pre
    margin: 8px 0
    line-height: 1.171875em
    padding: 0 !important

    > [data-mfm="blockCode-inner"],
    > code:not([data-mfm^="math"])
      display: block
      padding: 1rem
      border-radius: 2px
      margin: 0
      background-color: transparent
      width: fit-content
      font-size: 80%

  [data-mfm="center"],
  .center
    display: block
    text-align: center

  [data-mfm="quote"],
  blockquote, .blockquote
    margin: 8px
    padding: 6px 12px
    color: $mfmBlockQuoteColor
    border-left: solid 3px #eee

  [data-mfm="title"],
  .title
    display: block
    margin-bottom: 4px
    padding: 4px
    font-size: 90%
    text-align: center
    background: $mfmTitleBg
    border-radius: 4px

  [data-mfm="big"],
  .big
    display: inline-block
    font-size: 150%
    animation-iteration-count: infinite

  [data-mfm="motion"],
  .motion
    display: inline-block
    animation-iteration-count: infinite

  [data-mfm="spin"]
    display: inline-block
    animation: mfmSpin 1.5s linear infinite
    animation-direction: normal
  
  [data-mfm="jump"]
    display: inline-block
    animation: mfmJump 0.75s linear infinite

  [data-mfm="flip"]
    display: inline-block
    transform: scaleX(-1)

  [data-mfm="search"],
  .search
    display: flex
    margin: 8px 0

    > input
      appearance: none
      box-shadow: none
      min-width: 0px
      flex-shrink: 1
      padding: 10px
      width: 100%
      height: 40px
      font-family: sans-serif
      font-size: 16px
      color: $googleSearchFg
      background: $googleSearchBg
      border: solid 1px $googleSearchBorder
      border-radius: 4px 0 0 4px

      &:hover
        border-color: $googleSearchHoverBorder

    > button
      appearance: none
      box-shadow: none
      flex-shrink: 0
      padding: 0 16px
      border: solid 1px $googleSearchBorder
      border-left: none
      border-radius: 0 4px 4px 0
      margin: 0
      background: transparent
      cursor: pointer
      color: inherit

      &:hover
        background-color: $googleSearchButtonBgHover

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

    &:hover
      text-decoration: underline
  

  @keyframes mfmSpin
    0%
      transform: rotate(0)
    100%
      transform: rotate(1turn)
  
  @keyframes mfmJump
    0%
    transform: translateY(0)
    25%
      transform: translateY(-16px)
    50%
      transform: translateY(0)
    75%
      transform: translateY(-8px)
    100%
      transform: translateY(0)