// 公共样式 包括编辑时，各端渲染时
.editor
  position: relative

  p
    white-space: pre-wrap
    padding: 2px
    margin: 0 0 24px 0
    font-size: 16px
    line-height: 24px
    color: #212121

  h1
    color: #212121
    font-size: 28px
    line-height: 42px
    padding: 4px 0
    margin: 0 0 24px 0

  h2
    color: #212121
    font-size: 20px
    line-height: 30px
    padding: 2px 0
    margin: 0 0 24px 0

  .editor__img img
    max-width: 100%
    display: block
    background-color: #E0E0E0
    margin: 0 auto 24px

  .editor__video > iframe
    display: flex
    flex-direction: column
    align-items: center
    margin: 0 auto 24px
    width: 640px
    height: 430px

  .editor__img__desc
  .editor__video__desc
    font-size: 12px
    color: #616161
    text-align: center
    line-height: 16px
    margin: -16px auto 16px

  hr
    border: 0
    border-top: 1px solid #ddd
    width: 560px
    margin: 48px auto

  ul
    list-style: disc
    padding: 0
    margin-left: 20px
    margin-bottom: 24px

  ol
    list-style: decimal
    padding: 0
    margin-left: 20px
    margin-bottom: 24px

  li
    margin: 5px 0

  blockquote
    border-left: 4px solid #D8D8D8
    width: 100%
    margin: 0 0 24px 0
    box-sizing: border-box
    padding-left: 18px
    font-size:16px
    color: #9E9E9E
    line-height: 24px

  // clean a style
  a
    color: #212121
    text-decoration: none

  a.link
    color: #00B0FF
    > img
      display: inline-block
      width: 18px
      height: 18px
      transform: translateY(-3px)

  // inline custom block
  .editor__item
  .editor__champion
  .editor__synergy
  .editor__talent
    cursor: pointer
    color: #7F70FF
    &:hover
      text-decoration: underline

  // common block style
  .block__container
    cursor: pointer
    display: block
    padding: 20px
    border: 1px solid #ddd
    margin-bottom: 24px
    &:hover
      box-shadow: 0 1px 10px 0 rgba(0,0,0,.08)

  .block__version
    margin-left: auto
    font-size: 14px
    color: #9e9e9e

  .block__cost
    width: 32px
    height: 16px
    margin-left: 56px
    display: flex
    justify-content: space-around
    align-items: center
    font-size: 12px
    color: #fff

  .block__avatar
    height: 44px
    width: 44px
    margin-right: 12px

  .block__info
    display: flex
    flex-direction: column
    justify-content: space-between

  .block__abbr
    font-weight: bold
    font-size: 16px
    display: flex
    align-items: center

  .block__name
    font-size: 14px
    color: #616161

  .block__top
    display: flex

  // champion-block
  .champion-block__center
    display: flex
    align-items: center
    padding-bottom: 10px
    margin-bottom: 20px
    margin-top: 12px
    border-bottom: 1px solid #F5F5F5FF

  .champion-block__synergy
    margin-left: 12px
    display: flex
    align-items: center
    font-size: 12px
    img
      width: 20px
      height: 20px
      margin-right: 4px

  .champion-block__bottom
    display: flex

  .champion-block__skill-img
    width: 48px
    height: 48px
    margin-right: 12px

  .champion-block__skill-info
    height: 48px
    display: flex
    flex-shrink: 0
    flex-direction: column
    justify-content: space-between

  .champion-block__skill-name
    font-size: 16px
    font-weight: bold

  .champion-block__skill-cd
    font-size: 14px

  .champion-block__skill-desc
    font-size: 12px
    word-break: break-all
    margin-left: 20px
    line-height: 1.2

  // synergy-block
  .synergy-block__bottom
    margin-top: 12px
    margin-left: 56px

  .synergy-block__effect
    display: flex
    align-items: center
    margin-bottom: 8px

  .synergy-block__required
    height: 14px
    width: 14px
    display: flex
    justify-content: center
    align-items: center
    color: #fff
    background: #212121
    font-size: 10px
    flex-shrink: 0
    margin-right: 12px

  .synergy-block__desc
    font-size: 12px

  // item-block
  .item-block__desc
    margin-left: 56px
    margin-top: 12px
    line-height: 1.2

  // talent-block
  .talent-block__level
    border-radius: 2px
    color: #fff
    margin-left: 4px
    padding: 3px 4px
    font-size: 12px

  .talent-block__desc
    margin-left: 56px
    margin-top: 12px
    line-height: 1.2

  // squad-block
  .squad-block__top
    display: flex
    margin-bottom: 10px

  .squad-block__name
    font-size: 16px
    font-weight: bold

  .squad-block__champions
    display: flex
    margin-bottom: 12px

  .squad-block__champion
    cursor: pointer
    border: 2px solid
    margin-right: 4px
    background-size: contain
    width: 44px
    height: 44px
    position: relative
    line-height: 1

  .squad-block__champion-name
    color: #fff
    font-size: 12px
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000
    position: absolute
    bottom: 0
    left: 0
    width: 43px
    text-align: center
    text-overflow: clip
    overflow: hidden
    white-space: nowrap
    pointer-events: none

  .squad-block__champion-cost
    position: absolute
    right: 0
    top: 0
    width: 14px
    height: 14px
    background: #000
    border-radius: 0 0 0 6px
    color: #fff
    text-align: center
    font-size: 10px
    line-height: 14px
    pointer-events: none

  .squad-block__champion-star
    width: 12px
    height: 12px
    position: absolute
    left: 2px
    top: 2px
    pointer-events: none

  .squad-block__synergies
    display: flex

  .squad-block__synergy
    background: linear-gradient(90deg, #13131c, #65597a)
    box-shadow: 0 1px 4px 2px rgba(0,0,0,.12)
    color: #fff
    position: relative
    font-size: 12px
    border-radius: 12px
    padding: 3px 16px
    padding-left: 34px
    margin-right: 10px
    img
      pointer-events: none
      width: 30px
      height: 30px
      position: absolute
      left: -2px
      top: -6px
    span
      pointer-events: none

  .squad--pc-list
    margin-top: 10px
    margin-bottom: 10px

  .squad--pc-list-item
    background: rgba(255,215,0,0.08)
    border: 1px solid rgba(255,203,72,1)
    padding: 3px 14px
    font-size: 12px
    color: #B08313
    margin-right: 8px
    > span
      pointer-events: none