.ant-modal-body
  min-height: 650px !important

.squad-modal__title
  display: flex
  align-items: center
  justify-content: center
  position: relative

.squad-modal__main
  margin-top: 20px
  margin-bottom: 40px
  position relative
  min-height: 530px

.squad-modal__main__loading
  position absolute
  z-index: 99
  left: 0
  right: 0
  top: 0
  bottom: 0
  background: #fff
  opacity 0.6

.squad-modal__title__main
  color: #212121FF
  font-size: 20px
  font-weight: 500

.squad-modal__back
  position: absolute
  left: 0
  cursor: pointer
  display: flex
  align-items: center
  justify-content: center
  color: #616161FF
  img
    width: 20px

.squad-modal__close
  height: 20px
  width: 20px
  position: absolute
  right: 0
  cursor: pointer
  z-index: 10

.squad-modal__create
  width:110px;
  height:40px;
  line-height: 40px
  text-align: center
  background:rgba(255,96,64,1);
  border-radius:20px;
  font-size:16px;
  color: #fff
  margin: 0 auto
  cursor pointer

.squad-modal__placeholder
  height: 600px
  margin-top: 20px
  margin-bottom: 20px
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  font-size: 16px
  color:rgba(158,158,158,1)
  line-height: 22px;
  img
    width: 140px
    margin-bottom: 30px

.squad-modall__search
  display: flex
  align-items: center
  .ant-input
    border-radius: 16px

.squad-modall__label
  color: #212121FF
  margin-right: 20px
  font-size:14px;
  font-weight:500;
  margin-top: 3px

.squad-modal__origin
  margin-top: 20px
  margin-bottom: 20px
  display: flex
  line-height: 28px
  background:rgba(255,255,255,1);

.squal-modal__origin__items
  width: 650px;
  display: flex;
  flex-wrap: wrap;

.squal-modal__origin__item
  overflow hidden
  border-radius:14px;
  width: 88px
  height:28px
  cursor pointer
  margin: 3px
  border: 1px solid #fff
  &.active
    border:1px solid rgba(97,97,97,1)
  &:hover
    background: #F5F5F5FF

.squad-modal__champion__item
  width: 44px
  height: 44px
  position: relative

.squad-modal__champion
  display: flex
  flex-wrap: wrap
  background: #F5F5F5FF
  padding: 10px 24px
  margin-left: -24px
  margin-right: -24px
  height: 166px;
  overflow: auto

.squad-modal__champion__item
  margin-right: 8px
  margin-bottom: 8px
  cursor pointer
  border: 2px solid
  background-size: contain

.squad-modal__champion .squad-modal__champion__item:hover::after
  content: url("../img/champion-plus.png")
  display: flex
  justify-content: center
  align-items: center
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  background:rgba(0,0,0,1);
  opacity:0.6;

.squad-modal__selected-champions .squad-modal__champion__item:hover
  .squad-modal__champion__item__delete
    display: flex

.squad-modal__synergy
  display: flex
  align-items: center
  margin-left: 10px

  *
    pointer-events: none

  span
    white-space: nowrap

.squad-modal__synergy-img
  width: 20px
  height: 20px
  margin-right: 6px

.squad-modal__cost
  margin-left: 20px
  img
    width: 20px
    height: 20px
    margin-right: 6px

.squad-modal__champion__text
  color: #fff
  line-height: normal
  font-size: 12px;
  text-shadow: -1px -1px 1px #000000, 1px 1px 1px #000000
  position: absolute
  bottom: 0
  left: 0
  width: 43px;
  text-align: center;
  text-overflow: clip
  overflow: hidden
  white-space: nowrap

.squad-modal__selected-champions
  display: flex
  flex-wrap: wrap

.squad-modal__champion__placeholder
  width: 44px
  height: 44px
  border: 1px solid #DDDDDDFF
  background:rgba(250,250,250,1);
  box-shadow:0px 0px 3px 2px rgba(111,111,111,0.04);
  margin-right: 8px;

.squad-modal__list
  height: 530px
  overflow-y: auto
  overflow-x: hidden
  margin-bottom: 30px

.editor-tpl
  width: 750px
  border:1px solid rgba(224,224,224,1);
  display: flex
  margin-bottom: 20px
  &:hover
    box-shadow:0px 1px 10px 0px rgba(0,0,0,0.08);
    .editor-tpl__right
      visibility: visible

.editor-tpl__left
  padding: 10px
  width: 650px
  border-right:1px solid rgba(224,224,224,1);

.editor-tpl__right
  width: 100px
  display: flex
  align-items: center
  justify-content: center
  position relative
  visibility hidden

.editor-tpl__insert
  width:64px;
  height:32px;
  border-radius:16px;
  border:1px solid rgba(255,96,64,1);
  display: flex
  color: rgba(255,96,64,1);
  align-items: center
  justify-content: center
  cursor pointer

.editor-tpl__edit
  position absolute
  top: 10px
  right: 10px
  font-size:12px;
  cursor pointer
  img
    width: 12px
    height: 12px
    margin-right: 3px

.editor-tpl__delete
  position: absolute;
  right: 30px;
  bottom: 20px;
  color: black;
  font-size: 12px;
  cursor: pointer;
  display: flex
  align-items: center
  img
    width: 14px
    height: 14px
    margin-right: 5px

.squad-modal__create.disable
  background: #e0e0e0
  color: #9e9e9e
  width: 210px
  pointer-events: none

.squad-modal__champion__item__cost
  position absolute
  right: 0
  top: 0
  width:14px;
  height:14px;
  background:rgba(0,0,0,1);
  border-radius:0px 0px 0px 6px;
  color: white
  line-height: 14px
  text-align: center
  font-size:10px;

.squad-modal__champion__item__key
  z-index: 10
  width:55px;
  height:20px;
  line-height: 20px
  text-align: center
  background:rgba(255,255,255,1);
  border-radius:2px;
  font-size:12px;
  transform: scale(0.83)
  border:1px solid rgba(221,221,221,1);
  position absolute
  bottom: -30px
  left: -6px
  &.key
    color: #FF6040FF
    border-color: #FF6040FF

.squad-modal__champion__item__delete
  position absolute
  right: -8px
  top: -8px
  border-radius: 50%
  align-items: center
  justify-content: center
  width: 20px
  height: 20px
  background:#000000CC
  display: none
  img
    width: 8px
    height: 8px

.editor-tpl__left__title
  display: flex
  justify-content: space-between
  > div:first-child
    color: #212121FF
    font-size:16px;
  > div:last-child
    color: #616161FF
    font-size: 14px

.editor-tpl__left__champions
  display: flex
  margin-top: 15px
  margin-right: 15px

.editor-squad
  border:1px solid rgba(221,221,221,1);
  padding: 15px 20px
  &:hover
    box-shadow:0px 1px 10px 0px rgba(0,0,0,0.08);

.editor-squad__top
  display: flex
  justify-content: space-between
  margin-bottom: 10px

.editor-squad__title
  font-size:16px;
  font-weight:500;

.editor-squad__version
  font-size:14px;
  color: #616161FF

.editor-squad__bottom
  display: flex
  flex-wrap: wrap

.squad-modal__selected-synergy
  display: flex
  margin-top: 30px
  margin-bottom: 10px
  flex-wrap: wrap

.squad-modal__selected-synergy__item
  width:110px;
  height:20px;
  background:rgba(255,255,255,1);
  border-radius:12px;
  border:1px solid rgba(221,221,221,1);
  margin-bottom: 10px
  margin-right: 10px
  font-size:12px;
  color: #212121FF
  display: flex
  align-items: center
  justify-content: center
  position relative
  &.disable
    opacity 0.6
    background: #DDDDDDFF

  *
    pointer-events: none

  span
    margin-left: 10px

  img
    width: 30px
    height: 30px
    position absolute
    left: -4px
    top: -4px

.squad-modal__champion__item__star
  width: 12px
  height: 12px
  position: absolute
  left: 2px
  top: 2px

.editor-tpl .squad-modal__selected-synergy__item
.editor-squad .squad-modal__selected-synergy__item
  background:linear-gradient(90deg,rgba(19,19,28,1) 0%,rgba(101,89,122,1) 100%);
  box-shadow:0px 1px 4px 2px rgba(0,0,0,0.12);
  color: #FFFFFFFF !important // 因为需要用到 editor__synergy 样式，该样式中 已有 color
  height: 24px

.squad-modal__champion__item__star
  pointer-events: none

.squad-modal__champion__item__selected
  position absolute
  top: 0
  left: 0
  img
    width: 18px
    height: 18px
    margin-top: -3px

.editor-modal
  .ant-tabs-ink-bar
    width: 24px !important
    left: 23px
    margin: 0 auto
    height: 4px
    background-color:rgba(33,33,33,1)
    border-radius: 2px
  .ant-tabs-bar
    border-bottom: none
    margin-left: -16px
  .ant-tabs-nav .ant-tabs-tab
    font-size: 20px
    margin: 0
    &:hover
      color: #212121
  .ant-tabs-nav .ant-tabs-tab-active
    color: #212121
    font-size: 20px

.squad-modal__button
  padding: 10px 25px
  background:rgba(255,96,64,1)
  border-radius: 20px
  display: inline-block
  margin: 0 auto
  font-size: 16px
  color: #FFFFFF
  cursor pointer
  &.disabled
    background: #E0E0E0
    color: #9E9E9E
    pointer-events: none

.interposer-main
  height: 600px
  display: flex
  flex-direction: column
  justify-content: space-between
  .squad-modal__champion__item:hover:after
    display: none
  .squad-modal__champion__item__selected img
    height: 44px
    width: 44px
    margin-top: 0
  .squad-modal__champion
    background: #fff
    margin-right 0
  .squal-modal__origin__item
    display: flex
    > img
      margin-left: 10px
    > div
      margin-left: 20px

.synergy-interposer__group-title
  color: #212121
  font-size: 14px
  font-weight: 600
  margin-top: 30px
  margin-bottom: 16px

.synergy-interposer__group-list
  display: flex
  flex-wrap: wrap
  align-content: baseline

.synergy-interposer__group-item
  width: 48px
  text-align: center
  margin-right: 32px
  margin-bottom: 16px
  cursor pointer
  position: relative
  &.checked:after
    background-image: url("../img/interposer-checked.svg")
    background-size: 44px
    content: ""
    width: 44px
    height: 44px
    position: absolute
    top: 0
    left: 2px
  > img
    height: 44px
    width: 44px
  > div
    font-size: 12px
    margin-top: 5px
    color: #212121

.squad-modal__search-placeholder
  height: 500px
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  > div
    color: #9E9E9E
    font-size: 14px
    margin-top: 18px

.editor-synergy
  .synergy-popover__name
    border-bottom: none
  .editor-synergy__version
    margin-left: auto
    color: #9e9e9e
    font-size: 14px
    margin-top: -23px
  .synergy-popover__name__intro > div
    font-size: 16px !important
    color: #212121
  .synergy-popover__desc
    margin-top: -30px
  .synergy-popover__desc,
  .synergy-popover__levels
    margin-left: 57px

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

.editor-item__img
  margin: 0
  width: 48px
  height: 48px

.editor-item__version
  font-size:14px
  color:rgba(158,158,158,1)

.editor-item__left
  display: flex
  > div
    margin-left: 12px

.editor-item__abbr
  font-size:16px;
  font-weight:600;
  color:rgba(33,33,33,1);
  margin-bottom: 6px
  display: flex
  align-items: center

.editor-item__name
  font-size:14px;
  color:rgba(97,97,97,1);
  margin-bottom: 10px

.editor-item__tag
  border-radius:2px;
  color: #fff
  margin-left: 5px
  padding: 0 5px
  font-size: 12px