@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

.#{$hashClassName}.cn-ui-m-detail-info {
  background-color: $m-color-bg-white;
  border-radius: $m-radius-larger;
  padding: $m-s-12;

  @include flex(row, space-between, flex-start);
  flex-wrap: wrap;

  .cn-ui-m-detail-info-avatar {
    width: $m-s-48;
    height: $m-s-48;
    margin-right: $m-s-12;
    border-radius: 50%;

    flex: 0 0 $m-s-48;
  }
  .cn-ui-m-detail-info-right-slot {
    margin-top: $m-s-8;
    width: 100%;
  }

  .cn-ui-m-detail-info-wrapper {
    flex: 1 1 auto;
    @include flex(row, space-between, flex-start);
  }

  .cn-ui-m-detail-info-description {
    flex: 1 1 auto;
    // width: 0;

    &-hd {
      @include flex(row, space-between, flex-start);
      margin-bottom: $m-s-4;
    }

    &-title {
      font-size: $m-font-size-headline-5;
      color: $m-color-text-title1;
      font-weight: $m-font-weight-semi-bold;
      line-height: $m-font-lineheight-2;
      word-break: break-word;

      flex: 1 1 auto;
      padding-right: $m-s-16;
    }

    &-tag {
      flex: 0 0 auto;
      padding-top: $m-s-2;
    }

    &-item {
      font-size: $m-font-size-body-1;
      color: $m-color-text;
      font-weight: $m-font-weight;
      line-height: $m-font-lineheight-2;
      word-break: break-all;
    }
  }
}