@import "../../style/default.scss";

@function p($px) {
  @return pxToRem($px);
}

;
%itemClass {
  height: p(100);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  font-size: $font-size28;
  padding-right: pxToRem(30);
  .goTop {

  }
  .dragH {
  }
  .code-pair {
    height: 100%;
    width: 45%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center;
    div {
      width: 100%;
      color: #222;
      font-size: 15px;
    }
  }
  div.pb {
    margin-top: pxToRem(13);
    color: #999999;
    font-size: 13px;
  }
}

%banner {
  display: -webkit-flex;
  display: flex;
  width: 25%;
  font-size: 13px;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#editInterestCode {
  .waitSelIcon {
    display: inline-block;
    height: p(36);
    width: p(36);
    vertical-align: middle;
    background-size: pxToRem(36) pxToRem(36);
    background-image: url('../../style/iconImage/unchecked.png');
    background-repeat: no-repeat;
    margin-right: p(20);
  }
  .selIcon {
    background-image: url('../../style/iconImage/checked.png');
    background-repeat: no-repeat;
    // background-color: blue;
  }
  .explain-text {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: pxToRem(72);
    background: #FAFAFA;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    color: #999;
    font-size: 13px;
    padding-right: pxToRem(30);
  }
  .banner {
    @extend %banner;
    img {
      width: pxToRem(32);
      height: pxToRem(32);
    }
  }
  .containerClass {
    &:before {
      @include borderTop(#EAEAEA);
    }
    li {
      @extend %itemClass;
      position: relative;
      background-color: $white;
      &:after {
        @include borderBottom(#EAEAEA);
      }
    }
  }
  .del {
    position: absolute;
    z-index: 99;
    right: p(20);
    top: 0;
    padding: 0 p(20);
    color: #309fea;
    font-size: pxToRem(30);
  }
  .addCode {
    line-height: p(90);
    position: relative;
    &:after {
      @include borderBottom($main-border-color);
    }
    color: #949494;
    font-size: $font-size26;
    text-align: center;
  }
}

.sortableVerticalListMove {
  .banner {
    @extend %banner;
    img {
      width: pxToRem(32);
      height: pxToRem(32);
    }
  }
  @extend %itemClass;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 -1px 2px #888,
  0 1px 2px #888;
  -webkit-box-shadow: 0 -1px 2px #888,
  0 1px 2px #888;
  list-style: none;
}

#addTradeCode {
  .search {
    // line-height: p(90);
    position: relative;
    &:after {
      @include borderBottom($main-border-color);
    }
    color: #949494;
    font-size: $font-size26;
    // text-align: center;
    padding: p(30) p(20);
    width: 100%;
    border: none;
    box-sizing: border-box;
  }
  li {
    height: p(90);
    line-height: p(90);
    padding: 0 p(20);
    font-size: $font-size28;
    position: relative;
    &:after {
      @include borderBottom($main-border-color);
    }
    .icon {
      display: inline-block;
      line-height: p(50);
      width: p(50);
      vertical-align: middle;
      border: 1px solid $main-border-color;
      border-radius: 50%;
      text-align: center;
      font-size: $font-size40;
      position: absolute;
      right: 0;
      margin: p(20);
      z-index: 10;
    }
  }
}