Markdown {
  word-break: break-word
  (img) {
    -pending {
      background-color: #2d2c2c
      width: 120px
      height: 40px
      background-image: svg(fetching)
      background-position: center
      background-repeat: no-repeat
      border-radius: 3px

      @svg fetching {
        width: 100px
        height: 20px
        content: '<text x='0' y='12'>Fetching image...</text>'
        text {
          font: caption
          font-size: 12px
          fill: #757474
        }
      }
    }
  }

  (table) {
    margin: 10px 0
    border-collapse: collapse
    (th) {
      text-align: left
      border-bottom: 1px solid #DDD
      padding: 3px
    }
    (td) {
      padding: 3px
    }
  }

  (blockquote) {
    margin: 1rem 0;
    padding: 5px 20px;
    border-left: 4px gainsboro solid;
    background: #fafafa;
    color: #7c7c7c;
  }
  (hr) {
    border: none;
    border-top: 1px solid #2d2c2c
    margin: 1em 0
  }
  (pre) {
    overflow: auto;
    padding: 10px;
    background: #fbfbfb;
    border: 1px solid #EEE;
    max-height: 300px;
  }
  (ul) {
    (p) {
      margin: 0;
    }
  }
  (img.emoji) {
    width: 1.5em;
    height: 1.5em;
    align-content: center;
    margin-bottom: -0.3em;
  }

  p {
    (a) {
      color: #6f74e5
      :hover {
        text-decoration: underline;
      }
      [href^="@"] {
        color: #efef00
        border-bottom: 1px dotted #efef00
        :hover {
          text-decoration: none;
        }
      }
      [href^="#"] {
        color: #c1cdf0
        :hover {
          text-decoration: none;
        }
      }
    }
  }
}