.__loading
  width: 40px
  height: 40px

.__popover--loaded
  padding: 20px

.toolbar
  display: flex
  border-top: 1px solid #ddd
  border-bottom: 1px solid #ddd
  padding: 5px 37px

.toolbar__block
  margin-left: 30px

.toolbar > div.active
  border-bottom: 3px solid #FF511A

.icon
  width: 20px
  height: 20px

.editor-wrapper
  color: $base-color
  min-height: 800px
  font-size: 16px
  padding: 50px
  padding-top: 30px
  position relative
  margin-bottom: 200px

.image
  display: block
  max-width: 552px
  margin: 0 auto
  border: 2px solid transparent
  &:hover
    border: 2px solid #DCD9FF

.image__container
  display: flex
  justify-content: center
  margin: 24px auto

.image__position
  position: relative
  border: 1px solid transparent

.image__desc
  width: 100%
  border: none
  height: 32px
  box-sizing: border-box
  font-size: 14px
  color: #616161
  text-align: center
  min-width: 300px
  &::placeholder
    color: #9e9e9e

.editor__placeholder
  color: #CCCCCC
  font-size: 16px
  position: absolute
  top: 36px
  left: 54px

.game-btn__wrapper
  position: relative

.first-squad-tip
  position: absolute
  z-index: 100
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  box-sizing: border-box
  padding: 10px
  left: -90px
  top: 30px
  width: 200px
  background: red
  background:rgba(255,255,255,1);
  box-shadow:0px 2px 4px 0px rgba(0,0,0,0.06);
  border:1px solid rgba(221,221,221,1);
  border-radius: 5px

.first-squad-tip
  font-size: 14px;
  color:rgba(33,33,33,1);

.first-squad-tip__btn
  display: flex
  cursor: pointer
  margin-left: 60px
  margin-top: 10px
  > div:first-child
    font-size: 12px
    color: #9E9E9EFF
    margin-right: 16px
  &:last-child
    font-size: 12px
    color: #FF6040FF

.first-squad-tip__arrow
  position: absolute;
  display: block;
  top: -6px
  left: 101px
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
  &:after
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #fff;
    content: " ";
    border-width: 6px;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;

.toolbar__btn__wrapper
  padding: 3px
  cursor: pointer
  width: 30px
  display: flex
  align-items: center
  justify-content: center
  border-bottom: 3px solid transparent

.toolbar__btn__wrapper:hover
  background: #F5F5F5FF
  transition: all 0.3s

.editor-squad
  position: relative
  background-color: #fff
  margin: 0 0 24px 0
  cursor pointer
  &:hover
    .editor-squad__delete
      display: flex

.editor-squad__delete
  display: none
  position: absolute
  right: -15px
  top: -15px
  border-radius: 50%
  cursor pointer
  width:32px;
  height:32px;
  background:rgba(245,245,245,1);
  border:1px solid rgba(221,221,221,1);
  justify-content: center
  align-items: center
  img
    width:16px;
    height:16px;

.editor-champion
  .champion-popover__img
    height: 44px
    width: 44px
  .champion-popover__abbr
    font-weight: 600
  .champion-popover__name
    font-size: 14px
    color: #616161
  .editor-champion__version
    margin-left: auto
    font-size:14px;
    color: #9E9E9E
  .champion-popover__info__icon img
    width: 20px
    height: 20px
  .champion-popover__info__icon span
    font-size: 12px
    color: #212121
  .champion-popover__info__icon
    margin-right: 14px
  .wiki__cost
    width: 32px
    height: 16px
    margin-left: 2px
    margin-top: 2px
    margin-right: 14px
  .champion-popover__bottom .champion-popover__info
    display: flex
    justify-content: space-between
    margin-left: 0
  .champion-popover__info__title
    width: 160px
  .champion-popover__info__desc
    width: 440px
    word-break break-all
    color: #212121
  .editor-champion__skill-img
    width: 48px
    height: 48px
    margin-right: 12px
  .champion-popover__info__title
    font-size: 16px
    color: #212121
    font-weight:600
  .champion-popover__info__title__skill
    font-weight: 400
    font-size: 14px
    color: #616161
    margin-top: 6px

.editor__error-msg,
.editor__game-data-tip
  padding: 5px 14px
  margin: 10px 16px
  background: rgba(229,248,255,1);
  border-radius: 2px;
  border: 1px solid rgba(144,213,255,1);
  box-sizing border-box
  width: 666px
  margin-left: 50px

.editor__error-msg
  background: rgba(255,241,240,1);
  box-shadow: 0px 2px 8px 0px rgba(33,33,33,0.08);
  border-radius: 2px;
  border: 1px solid rgba(254,163,158,1);

.editor__error-msg__content,
.editor__game-data-tip__content
  font-size:14px;
  color:rgba(33,33,33,1);

.editor__game-data-tip__view
  font-size:14px;
  color:rgba(24,144,255,1);
  margin-left 16px
  cursor pointer

.editor__error-msg > img.editor__error-msg__close,
.editor__game-data-tip > img.editor__game-data-tip__close
  width: 15px
  height: 15px
  margin-right 10px
  cursor pointer
  float right

.editor__vertical-divider
  width: 1px
  background: #ddd
  height: 16px
  margin-top: 5px
  margin-left: 8px
  margin-right: 8px

.editor .squad-modal__selected-synergy > a:before
  display none

.image__placeholder
  position: absolute
  left: 0
  bottom: 0
  right: 0
  top: 0
  font-size: 16px
  color: #616161
  display: flex
  justify-content: center
  align-items: center
  z-index: 900

.editor__error-msg .editor__error-msg__icon
  display: inline-block
  height: 12px
  width: 12px
  margin-right: 5px
  margin-top: -2px

.editor__full-loading:after
  content: url("/icon/loading.gif")

.editor__event-none
  pointer-events: none

.editor-image__zoom
  display: flex
  font-size: 12px
  color: #616161
  > div
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    cursor: pointer
  > div:first-child
    margin-right: 40px
  img
    margin-bottom: 2px
    width: 20px
    height: 20px