.member-header{
  .profile-box{
    @include horizional-flex;
    padding: $content-padding;
    background-color: $theme-color;
    position: relative;
    .profile-avatar-box{
      .profile-avatar{
        width: $component-size-larger;
        height: $component-size-larger;
        border-radius: 50%;
      }
      margin-right: $component-span;
    }
    .upgrade-button{
      background-color: transparent;
      border-color: #fff;
      color: #fff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: $content-padding;
    }
    .profile-body{
      @include flex-adapter;
      .profile-name{
        display: block;
        margin-bottom: $component-span;
        font-weight: bold;
        font-size: $font-size;
        @include user-select-none;
        .icon-edit{
          color:#fff;
        }
      }
      .member-level{
        display: block;
        margin-bottom: $component-span;
        .member-level-content{
          display: inline-block;
          padding: 0 $text-padding;
          border-radius: $border-radius;
          line-height: 1;
          background: rgba(255, 255, 255, 0.2);
          .member-level-icon{

          }
          .member-level-name{

          }
        }
      }
      .profile-property-box{
        .profile-property-item{

        }
      }
    }
  }
  &.light{
    .profile-box{
      .profile-body{
        .profile-name{
          color:$title-color;
        }
        .profile-property-box{
          .profile-property-item{
            color:$sub-color;
          }
        }
      }
    }
  }
  &.dark{
    .profile-box{
      .profile-body{
        .profile-name{
          color:#fff;
        }
        .member-level{
          .member-level-icon{

          }
          .member-level-name{
            color:#fff;
          }
        }
        .profile-property-box{
          .profile-property-item{
            color:#fff;
          }
        }
      }
    }
  }
}