.#{$namespace} {
  &-avatar {
    &-box {
      display: flex;
      align-items: center;
    }

    // 姓名
    &-name {
      margin: 0px $mg-base;
      cursor: pointer;

      h1 {
        display: inline-block;
        font-size: $ft-sm;
      }

      &:hover {
        color: $primary;
        h1 {
          color: $primary;
        }
      }
    }

    // 装饰三角
    &-triangle.svg-icon {
      width: 10px;
      height: 10px;
      color: $g-999;
      fill: $g-999;
      margin-left: 5px;
    }
  }

  &-avatar {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    color: $white;
    background-color: $g-100;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: $ft-sm;
    vertical-align: middle;

    & > img {
      display: block;
      height: 100%;
    }

    &-circle {
      border-radius: 50%;
    }

    &-square {
      border-radius: 4px;
    }
  }
}