@import '../../style/themes/default.less';

@component-prefix-cls: ~'@{qn-prefix}-avatar';

.@{component-prefix-cls}-list {
  &-item {
    display: flex;
    align-items: center;
    color: @text-color;

    .ant-avatar {
      margin-right: 4px;
    }
  }

  &-open-ding {
    cursor: pointer;
  }

  &-disabled {
    color: #c8c9cc;
    cursor: not-allowed;
  }

  &-container {
    display: flex;
    padding-left: 16px;

    .ant-avatar {
      margin-left: -16px;
    }
  }

  &-more {
    margin-left: 8px;
    color: @link-color;
    cursor: pointer;
  }

  &-item,
  &-container {
    .ant-avatar {
      border: 1px solid #fff;

      :first-child {
        border: 0 none;
      }
    }
  }

  &-other {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 32px;
    margin-left: -16px;
    color: @primary-color;
    line-height: 32px;
    text-align: center;
    background-color: #e1f0fe;
    border: 1px solid #fff;
    border-radius: 100%;
  }

  &-dropdown {
    min-width: 160px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);

    .ant-divider-horizontal {
      margin: 12px 0 !important;
      padding: 0 20px;
    }

    .ant-dropdown-menu-item {
      padding: 4px 0 !important;
      background-color: transparent !important;
    }

    &-content {
      max-height: 220px;
      padding-bottom: 10px;
      overflow-y: scroll;
    }

    .@{component-prefix-cls}-list-item {
      box-sizing: content-box;
      padding: 10px 12px;

      &:hover {
        background-color: #f8f8f8;
      }
    }
  }

  &-dropdown-title {
    box-sizing: content-box;
    height: 20px;
    padding: 10px 12px;
    color: #323233;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    border-bottom: 1px solid #eaeaea;

    & > span {
      color: #969799;
    }
  }

  &-ding {
    margin-right: 4px;
    font-size: 16px;
  }
}