@import "../style/editor.styl"

.editor.renderer-mobile
  p
    color: #616161
    font-size: 14px
    margin-bottom: 16px

  h1
    font-size: 16px
    margin-bottom: 16px
    line-height: 24px

  h2
    font-size: 14px
    margin-bottom: 16px
    line-height: 24px

  .editor__img img
    margin-bottom: 16px

  hr
    margin: 36px auto
    width: 270px !important

  ul,
  ol
    font-size: 14px
    margin-bottom: 16px

  iframe
    width: 100%
    height: auto

  blockquote
    font-size: 14px
    margin-bottom: 16px

  // 移动端隐藏 a 链接的图标
  a.link > img
    display: none
    color: #66a6ff

  // champion
  .editor-mobile__champion
    background: #f5f5f5
    border-radius: 4px
    padding: 12px
    margin-bottom: 16px

  .editor-mobile__champion__top
    display: flex
    padding-bottom: 15px
    border-bottom: 1px solid #bebebe

  .editor-mobile__champion__avatar
    width: 59px
    height: 59px
    border: 3px solid
    margin-right: 14px

  .editor-mobile__champion__abbr
    color: #212121
    font-size: 16px
    font-weight: 700

  .editor-mobile__champion__name
    line-height: normal
    font-size: 12px
    color: #616161
    margin-top: 4px
    margin-bottom: 4px

  .editor-mobile__champion__icons
    display: flex
    align-items: center

  .editor-mobile__champion__cost
    background: #212121
    width: 28px
    height: 14px
    color: #fff
    padding: 0 4px
    box-sizing: border-box
    font-size: 10px
    display: flex
    align-items: center
    justify-content: space-between
    margin-right: 12px
    > img
      width: 10px

  .editor-mobile__champion__synergy
    display: flex
    align-items: center
    font-size: 12px
    margin-right: 12px
    > img
      width: 18px
      height: 18px
      margin-right: 4px

  .editor-mobile__champion__version
    color: #9e9e9e
    flex: 1
    text-align: right
    font-size: 10px

  .editor-mobile__champion__bottom
    padding-top: 12px

  .editor-mobile__champion__bottom__top
    display: flex

  .editor-mobile__champion__bottom__top__img
    width: 36px
    height: 36px
    margin-right: 12px

  .editor-mobile__champion__bottom__top__info
    font-size: 14px

  .editor-mobile__champion__bottom__top__cd
    font-size: 10px
    color: #616161

  .editor-mobile__champion__bottom__bottom
    font-size: 12px
    margin-top: 10px
    color: #616161

  // synergy
  .editor-mobile__synergy
    border-radius: 4px
    padding: 12px
    margin-bottom: 16px
    background: #f5f5f5

  .editor-mobile__synergy__title
    display: flex
    align-items: center
    font-size: 14px
    margin-bottom: 12px

  .editor-mobile__synergy__avatar
    width: 32px
    height: 32px
    margin-right: 12px

  .editor-synergy__version
    margin-left: auto
    font-size: 10px
    color: #9e9e9e

  .editor-mobile__synergy__desc
    font-size: 12px
    color: #616161

  .editor-mobile__synergy__level
    display: flex
    margin-top: 12px

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

  .editor-mobile__synergy__level__effect
    font-size: 12px
    color: #616161

  // item
  .editor-mobile__item
    border-radius: 4px
    padding: 12px
    background: #f5f5f5
    margin-bottom: 16px

  .editor-mobile__item__top
    display: flex
    justify-content: space-between

  .editor-mobile__item__version
    margin-left: auto
    font-size: 10px
    color: #9e9e9e

  .editor-mobile__item__img
    width: 36px
    height: 36px
    margin-right: 12px

  .editor-mobile__item__abbr
    font-size: 14px

  .editor-mobile__item__name
    font-size: 10px
    color: #616161

  .editor-mobile__item__desc
    margin-top: 10px
    color: #616161
    font-size: 12px

  // squad
  .squad-block
    border: none
    border-radius: 4px
    padding: 12px
    margin-bottom: 16px
    background: #f5f5f5
    &:hover
      box-shadow: none

  .squad-block__top
    font-size: 14px

  .squad-block__version
    font-size: 10px
    color: #9e9e9e

  .squad-block__champion
    margin-bottom: 8px
    margin-right: 8px
    width: 44px
    height: 44px

  .squad-block__synergy
    margin-bottom: 12px
    padding: 0px 16px
    padding-left: 30px
    > img
      width: 24px
      height: 24px
      top: -4px

  .squad-block__champions,
  .squad-block__synergies
    flex-wrap: wrap

  // talent
  .editor-mobile__talent
    border-radius: 4px
    padding: 12px
    background: #f5f5f5
    margin-bottom: 16px

  .editor-mobile__talent__top
    display: flex

  .editor-mobile__talent__img
    width: 32px
    height: 32px
    margin-right: 12px

  .editor-mobile__talent__version
    margin-left: auto
    font-size: 10px
    color: #9e9e9e

  .editor-mobile__talent__abbr
    font-size: 14px
    display: flex
    align-items: center

  .editor-mobile__talent__name
    font-size: 10px
    color: #616161

  .editor-mobile__talent__tag
    margin-top: 2px
    width: 12px
    height: 12px
    display: flex
    justify-content: center
    align-items: center
    color: #fff
    border-radius: 2px
    font-size: 10px
    margin-left: 4px

  .editor-mobile__talent__desc
    margin-top: 10px
    color: #616161
    font-size: 12px

  .block__container
    margin-bottom: 16px