@import './scss/variable.scss';
@import './scss/mixin.scss';

// 单头像，带文字和操作
#{$avatar-prefix} {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  height: $S32;
  font-size: 0;
  border-radius: $S32 / 2;
  padding: $S4 0;
  cursor: pointer;
  &:hover {
    background: $gray-01;
    #{$avatar-prefix}-close {
      visibility: visible;
    }
  }
  &#{$avatar-prefix}-hover-close {
    box-shadow: 0 0 0 1px $border-brand;
    background: transparent;
  }
  &-img {
    width: $S24;
    height: $S24;
    border-radius: $shape-circular;
    vertical-align: middle;
    margin-left: $S4;
  }
  &-name {
    vertical-align: middle;
    font-size: $font-size-body;
    line-height: $line-height-body;
    color: $gray-08;
    margin: 0 $S16 0 $S8;
    &:hover {
      color: $hover-brand;
    }
  }
  &-close {
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(25%, -25%);
    color: $gray-06;
    font-size: 14px !important;
    &:hover {
      color: $hover-brand;
    }
  }
}

// 文本头像
#{$avatar-prefix}-text {
  color: $snow;
  display: inline-block;
  text-align: center;
  &-xs {
    @include text-avatar-size($avatar-size-xs, 8px);
  }
  &-small {
    @include text-avatar-size($avatar-size-small, 10px);
  }
  &-medium {
    @include text-avatar-size($avatar-size-medium, 12px);
  }
  &-large {
    @include text-avatar-size($avatar-size-large, 16px);
  }
  &-xl {
    @include text-avatar-size($avatar-size-xl, 20px);
  }
}

// 纯头像，不带文字和操作
#{$avatar-prefix}-image {
  display: inline-block;
  &-xs {
    @include image-avatar-size($avatar-size-xs);
  }
  &-small {
    @include image-avatar-size($avatar-size-small);
  }
  &-medium {
    @include image-avatar-size($avatar-size-medium);
  }
  &-large {
    @include image-avatar-size($avatar-size-large);
  }
  &-xl {
    @include image-avatar-size($avatar-size-xl);
  }
}

// 头像群
#{$avatar-prefix}-cluster {
  display: inline-block;
  #{$avatar-prefix}-cluster-item {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    border-radius: $shape-circular;
    width: $S24;
    height: $S24;
    line-height: $S24;
    vertical-align: middle;
    cursor: pointer;
    margin-right: $S8;
    &:hover {
      box-shadow: 0 0 0 1px $gray-01;
      #{$avatar-prefix}-cluster-item-close {
        visibility: visible;
      }
    }
    &#{$avatar-prefix}-cluster-item-hover-close {
      box-shadow: 0 0 0 1px $border-brand;
    }
    &-img {
      width: 100%;
      height: 100%;
      border-radius: $shape-circular;
    }
    &-text {
      cursor: pointer;
      display: inline-block;
      font-size: 12px;
      color: $snow;
      width: 100%;
      height: 100%;
      border-radius: $shape-circular;
      text-align: center;
      .scale {
        display: inline-block;
        transform: scale(0.8);
      }
    }
    &-close {
      visibility: hidden;
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(25%, -25%);
      font-size: 14px !important;
      color: $gray-06;
      &:hover {
        color: $hover-brand;
      }
    }
  }
  &-add {
    color: $primary-brand;
    vertical-align: middle !important;
    margin-left: -$S4;
    cursor: pointer;
  }
}

// 头像组
#{$avatar-prefix}-group {
  display: inline-block;
  position: relative;
  &-img {
    cursor: pointer;
    box-sizing: content-box;
    border: 2px solid $snow;
    width: $S24;
    height: $S24;
    border-radius: $shape-circular;
    margin-right: -6px;
    vertical-align: middle;
  }
  &-text {
    cursor: pointer;
    display: inline-block;
    box-sizing: content-box;
    border: 2px solid $snow;
    width: $S24;
    height: $S24;
    line-height: $S24;
    font-size: 12px;
    color: $snow;
    border-radius: $shape-circular;
    margin-right: -6px;
    vertical-align: middle;
    .scale {
      display: inline-block;
      transform: scale(0.8);
    }
  }
  &-last {
    margin-right: 0;
  }
  &-more {
    cursor: pointer;
    border-radius: $shape-circular;
    vertical-align: middle !important;
    color: $snow;
    background: rgba(56, 56, 56, 0.6);
    position: absolute;
    right: 2px;
    top: 2px;
  }
}