$namespace: 'record';
.record{
  .section-title{
    margin: .35rem 0;
  }
  .hr{
    border-width: .12rem;
    border-color: #f6f6f6;
    margin: .35rem 0;    
  }
}
.record__count{
  font-size: $--font-size-small;
  color: $--font-color-dark;
  .red{
    font-size: $--font-size-large;
  }
}

@include b(head){
  @include flex();
  text-align: center;
  p{
    width: 50%;
    line-height: .8rem;
    height: .8rem;
    font-size: $--font-size-big;
    position: relative;
    @include when(active){
      color: $--color-theme-boy;
      &:after{
        content: "";
        position: absolute;
        height: 0.04rem;
        border-radius: 0.02rem;
        width: 25%;
        left: 50%;
        bottom: .1rem;
        transform: translateX(-50%);
        background-color: $--color-theme-boy;
      }
    }
  }
}

@include b(account){
  margin: $--edge-view;
  @include flex();
  @include e(btn){
    background-color: $--color-theme-girl;
  }
}
@include b(item){
  position: relative;
  margin: $--edge-view;
  border-bottom: 1px solid #f6f6f6;
  color: $--font-color-light;
  line-height: .5rem;
  padding-right: 2rem;
  @include e(status){
    position: absolute;
    right: $--edge-view * 2;
    line-height: 1.5rem;
    top: 0;
  }
  @include e(name){
    @include book-name();
  }
  @include e(chapter){
    @include book-name($font-size: $--font-size-base);
  }
  @include e(tiem){
    color: $--font-color-light;
    font-size: $--font-size-small;
  }
  @include e(fee){
    position: absolute;
    right: $--edge-view * 2;
    top: 0;
    font-size: $--font-size-base;
    line-height: 1.5rem;
    @include m(book){
      line-height: 1rem;
    }
  }
}


.record-none {
  border-bottom: none;
  padding: 1em;
}