$namespace: "book-city";

@include b(header) {
  padding: 0 $--edge-view;
  height: 1rem;
  border-bottom: 1px $--color-border solid;
  @include flex();
}
@include b(theme) {
  @include flex();

  @include e(item) {
    font-size: $--font-size-medium;
    line-height: 0.94rem;
    border-bottom: 0.06rem transparent solid;
    &:first-child {
      margin-right: 0.6rem;
    }
    @include when(active) {
      font-size: $--font-size-large;
      font-weight: bold;
      &:first-child {
        border-bottom: 0.06rem $--color-theme-boy solid;
        color: $--color-theme-boy;
      }
      &:last-child {
        border-bottom: 0.06rem $--color-theme-girl solid;
        color: $--color-theme-girl;
      }
    }
  }
}
@include b(nav) {
  padding: 0 0.3rem;
  margin: 0.3rem 0;
  @include flex();

  @include e(item) {
    &:nth-child(1) img {
      // box-shadow:  0 .09rem .27rem rgba(#ff8343, .36);
      border-radius: 0.2rem;
    }
    &:nth-child(2) img {
      // box-shadow:  0 .09rem .27rem rgba(#ffc13b, .36);
      border-radius: 0.2rem;
    }
    &:nth-child(3) img {
      // box-shadow:  0 .09rem .27rem rgba(#ff5b88, .36);
      border-radius: 0.2rem;
    }
    &:nth-child(4) img {
      // box-shadow:  0 .09rem .27rem rgba(#b57cff, .36);
      border-radius: 0.2rem;
    }
  }
  @include e(icon) {
    width: 0.8rem;
    height: 0.8rem;
    display: block;
    margin: 0 auto;
  }
  @include e(text) {
    font-size: $--font-size-medium;
    color: $--font-color-dark;
    margin-top: 0.2rem;
    line-height: 1;
    text-align: center;
  }
}
@include b(banner) {
  height: 2.4rem;
  margin: 0.3rem $--edge-view 0.38rem;
  padding: 0.2rem 0.28rem;
  box-sizing: border-box;
  border-radius: $--radius;

  @include e(title) {
    @include book-name();
    margin-bottom: 0.5em;
  }
  @include e(intro) {
    @include book-intro($line-height: 1.8);
  }
}

@include b(adbanner) {
  padding: 0;

  a {
    display: block;
    font-size: 0;
  }

  img {
    width: 100%;
    height: 2.4rem;
  }

  .mint-swipe-indicators {
    bottom: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
  }
}

@include b(recommend) {
  padding: 0 $--edge-view;
}
@include b(recommend-one) {
  margin-top: 0.46rem;
  @include e(list) {
    overflow: hidden;
  }
  @include e(item) {
    width: 2rem;
    float: left;
    margin-right: 0.5rem;
    margin-top: 0.36rem;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}
@include b(recommend-two) {
  margin-top: 0.46rem;
  @include e(line) {
    overflow: hidden;
  }
  @include e(list) {
    overflow: auto;
    border-top: 0.02rem solid #f7f7f7;
    margin-top: 0.2rem;
  }
  @include e(section) {
    margin-top: 0.3rem;
  }
  @include e(title) {
    @include book-name($--font-size-biger);
    margin-bottom: 0.2rem;
    line-height: $--font-size-biger;
  }
  @include e(desc) {
    @include book-intro($--font-size-base, 3);
  }
  @include e(item) {
    width: 1.5rem;
    float: left;
    margin-right: 0.34rem;
    margin-top: 0.36rem;
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
  /* .x-book {
    margin: 0.4rem 0;
  }
  @include e(title) {
    @include book-name($--font-size-large);
    margin-bottom: 0.4rem;
  }
  @include e(intro) {
    @include book-intro($--font-size-base, 4);
  } */
  /* @include e(item) {
    display: flex;
    font-size: $--font-size-medium;
    line-height: 2.3;
  } */
  /* @include e(type) {
    width: 2rem;
    color: $--font-color-light;
  }
  @include e(name) {
    width: 5rem;
    @include single-line(inherit);
    color: $--font-color-medium;
  } */
}
@include b(rank) {
  margin-top: 0.46rem;
  @include e(types) {
    @include flex();
    padding: 0 $--edge-view;
    margin-top: 0.36rem;
  }
  @include e(type) {
    position: relative;
    padding-bottom: 0.3em;
    font-size: $--font-size-medium;
    &::after {
      $width: 0.4rem;
      content: "";
      position: absolute;
      bottom: 0;
      left: calc(50% - #{$width / 2});
      width: $width;
      height: 0.04rem;
      border-radius: $width / 2;
    }
    @include when(active) {
      color: $--color-theme-girl;
      &::after {
        background-color: $--color-theme-girl;
      }
    }
  }
  @include e(list) {
    height: 8.5rem;
    overflow: hidden;
  }
  @include e(item) {
    font-size: $--font-size-base;
    padding: 0 $--edge-view;
    height: 0.85rem;
    @include flex();
  }
  @include e(icon) {
    width: 1.4em;
    height: 1.4em;
    // line-height: 1.2;
    margin-right: 0.2rem;
    text-align: center;
    @include m(hot) {
      background: url(../../assets/首页-火.png) no-repeat 0 / 100%;
    }
    @include m(normal) {
      border-radius: 50%;
      background-color: #ccc;
      color: #fff;
    }
    @include m(on) {
      background-color: $--color-theme-girl;
    }
  }
  @include e(name) {
    width: 5.5rem;
    color: $--font-color-dark;
    @include single-line();
    flex-grow: 1;
    @include m(on) {
      color: $--color-theme-girl;
    }
  }

  @include e(num) {
    width: 1.2rem;
    color: $--font-color-medium;
  }
}

.boy {
  @include b(banner) {
    background-color: $--color-theme-boy-light;
  }
}
.girl {
  @include b(banner) {
    background-color: $--color-theme-girl-light;
  }
}
