@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
@use "../detail-layout" as detail;

@include detail.panel('contact-friend-info');

.contact-friend-info {
  &__remark-edit {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  &__remark-edit-icon {
    flex-shrink: 0;
    cursor: pointer;

    @include theme() {
      color: get(text-color-tertiary);
    }
  }

  &__remark-placeholder {
    @include theme() {
      color: get(text-color-tertiary);
    }
  }

  &__remark-editor {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }

  &__signature {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;

    @include theme() {
      color: get(text-color-secondary);
    }
  }
}