.#{$ns}Property {
  &-wrapper {
    border: 1px solid var(--borderColor);
    &-title {

    }
    &-content {
      &-row {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        border-bottom: 1px solid var(--borderColor);
        .#{$ns}Form-item.verticalField {
          margin: 0;
          >.#{$ns}Form-value {
            padding: 0;
          }
        }
        .cell {
          >.#{$ns}Form-item {
            margin-bottom: 0;
          }
        }
        .ellipsis {
          white-space: nowrap;
          overflow: hidden;
        }
        &-table-item {
          display: flex;
          justify-content: flex-start;
          align-items: stretch;
          .property-formitem-label {
            // width: 134px;
            padding: 0 4px;
            background: var(--saas-crud-table-thead-color);
            font-weight: normal;
            color: var(--Table-thead-color);
            >.cell {
              color: var(--Table-thead-color);
            }
            >.ellipsis-cell {
              @include ellipsis();
            }
            .#{$ns}Remark {
              &-icon {
                // color: var(--saas-font-size-dark-black);
                // color: var(--saas-Secondary-Text);
                color: var(--saas-Placeholder-Text);
              }
            }
          }
          .property-formitem-value {
            flex: 1;
            min-width: calc(100% - 120px);
            color: var(--saas-Title-Text);
            .#{$ns}NumberField {
              padding: 0 4px;
            }
            >.cell {
              width: 100%;
              color: var(--saas-Title-Text);
              @include media-breakpoint-up(sm) {
                >.#{$ns}Form-item {
                  min-height: 32px;
                  color: var(--saas-Title-Text);
                  >.#{$ns}Form-value {
                    >.#{$ns}Form-control {
                      padding: 0 4px;
                      min-height: 32px;
                      >.#{$ns}TextControl-input, >.#{$ns}Number, >.#{$ns}DatePicker, >.#{$ns}DateRangePicker, >.#{$ns}Picker-input,
                      >.#{$ns}RichTextControl, >.#{$ns}ColorPicker, >.#{$ns}ResultBox, >.#{$ns}Picker >.#{$ns}Picker-input {
                        border: none;
                        font-size: 13px;
                        padding: 0;
                        min-height: 32px;
                        color: var(--saas-Title-Text);
                        >.#{$ns}TextControl-placeholder {
                          left: 0;
                          top: 5px;
                        }
                        .#{$ns}TransferPicker-icon {
                          margin: 0 0 0 auto;
                        }
                        .#{$ns}Number-input-wrap {
                          margin-left: 0;
                          height: 32px;
                          .#{$ns}Number-input {
                            padding-left: 0;
                            height: 100%;
                            color: var(--saas-Title-Text);
                          }
                        }
                        >.#{$ns}Picker-placeholder {
                          line-height: 30px;
                        }
                        >.#{$ns}Picker-valueWrap {
                          display: flex;
                          align-items: center;
                        }
                        .#{$ns}Number-handler-wrap {
                          .#{$ns}Number-handler {
                            height: 16px;
                            line-height: 16px;
                          }
                          .#{$ns}Number-handler-up {
                            padding: 0;
                          }
                        }
                        .#{$ns}ResultBox-value-wrap {
                          padding: 0;
                          .#{$ns}ResultBox-singleValue, .#{$ns}ResultBox-placeholder {
                            padding-left: 0;
                            margin-left: 0;
                          }
                        }
                      }
                      >.#{$ns}TextControl-input {
                        > input {
                          height: unset;
                          color: var(--saas-Title-Text);
                        }
                      }
                      >.#{$ns}DatePicker {
                        .#{$ns}DatePicker-content {
                          .#{$ns}DatePicker-toggler {
                            svg {
                              top: 0;
                            }
                          }
                        }
                      }
                      >.#{$ns}DateRangePicker {
                        .#{$ns}DateRangePicker-content {
                          .#{$ns}DateRangePicker-clear {
                            // padding: 0 0.1875rem;
                            display: flex;
                            align-items: center;
                            height: 32px;
                            line-height: 32px;
                          }
                          .#{$ns}DateRangePicker-toggler {
                            svg {
                              top: 0;
                            }
                          }
                        }
                      }
                      >.#{$ns}ResultBox {
                        .#{$ns}TransferDropDown-icon {
                          margin-right: 0;
                        }
                      }
                      >.#{$ns}Picker {
                        .#{$ns}Picker-input {
                          .#{$ns}Picker-btn {
                            right: 0;
                          }
                        }
                      }
                    }
                    >.#{$ns}ImageControl {
                      margin: var(--gap-xs) 0;
                    }
                    >.#{$ns}SwitchControl {
                      min-height: 24px;
                      padding-top: 4px;
                    }
                    >.#{$ns}RadiosControl, >.#{$ns}CheckboxesControl {
                      padding-top: 4px;
                    }
                    >.#{$ns}Form-control.#{$ns}NumberControl {
                      padding-right: 0;
                    }
                    >.#{$ns}DateRangePicker {
                      height: unset;
                      .#{$ns}DateRangePicker-content {
                        .#{$ns}DateRangePicker-clear {
                          padding: 0 0.1875rem;
                          line-height: 30px;
                        }
                      }
                    }
                    >.#{$ns}CheckboxesControl {
                      >.#{$ns}Grid {
                        .#{$ns}Grid-col--sm12, .#{$ns}Grid-col--sm6, .#{$ns}Grid-col--sm3, .#{$ns}Grid-col--md12,
                        .#{$ns}Grid-col--md6, .#{$ns}Grid-col--md3{
                          border-right: none;
                        }
                      }
                    }
                    >.#{$ns}TextareaControl, >.#{$ns}RichTextControl {
                      padding: 4px;
                      > textarea {
                        border: none;
                        font-size: 13px;
                        padding: 0;
                        &::placeholder {
                          font-size: 12px;
                        }
                      }
                    }
                    >.#{$ns}Form-static {
                      font-size: 13px;
                      min-height: 24px;
                      padding: 0;
                      >.#{$ns}Form-control {
                        >.#{$ns}MappingField {
                          height: 24px;
                          line-height: 24px;
                        }
                      }
                    }
                    >.#{$ns}Form-static {
                      font-size: 13px;
                      min-height: 32px;
                      >.#{$ns}Form-control {
                        height: 100%;
                        >.#{$ns}MappingField {
                          height: 32px;
                          line-height: 32px;
                        }
                      }
                    }
                    .#{$ns}Picker-valueWrap {
                      margin: 0;
                    }
                    >.#{$ns}InputTable {
                      padding: 0;
                    }
                  }
                  >.#{$ns}Form-static {
                    font-size: 13px;
                    min-height: 32px;
                    >.#{$ns}Form-control {
                      height: 100%;
                      >.#{$ns}MappingField {
                        height: 32px;
                        line-height: 32px;
                      }
                    }
                    .#{$ns}NumberField {
                      padding: 0;
                    }
                  }
                  >.#{$ns}ImageControl {
                    margin: var(--gap-xs) 0;
                  }
                  >.#{$ns}Form-control {
                    padding: 0 4px;
                  }
                  >.#{$ns}TextareaControl {
                    padding: 0px;
                  }
                  >.#{$ns}InputTable {
                    padding: 0;
                  }
                }
                font-size: 13px;
              };
              .is-showCount {
                width: auto;
                max-width: unset;
                min-width: unset;
                // 2025-03 产品要求编辑详情的单/多输入 无边框
                .#{$ns}TextControl-input {
                  border: none;
                }
              }
            }
            .tiled-item-title-left, .fieldTitle {
              font-size: 14px;
              font-weight: 500;
              .#{$ns}Remark {
                color: var(--saas-Placeholder-Text);
                vertical-align: sub;
                margin-left: 4px;
                margin-right: 4px;
                &>svg {
                  top: 0;
                  width: 1rem;
                  height: 1rem;
                }
                &:hover {
                  >svg {
                    color: var(--saas-Placeholder-Text);
                  }
                }
              }
            }

            .#{$ns}Table {
              color: var(--saas-Title-Text);
              .#{$ns}Table-content {
                .#{$ns}Table-table {
                  border-bottom: none;
                  >thead tr th {
                    .#{$ns}TableCell--title {
                      height: 30px;
                      display: flex;
                      align-items: center;
                      color: var(--Table-thead-color);
                    }
                  }
                  >tbody tr td {
                    >div {
                      display: flex;
                      align-items: center;
                      color: var(--saas-Title-Text);
                    }
                  }
                  >tbody tr td.is-linkUrl {
                    >div {
                      color: inherit;
                    }
                  }
                }
              }
            }

            .#{$ns}Form-control {
              padding: 0;
            }

            .#{$ns}Form-item {
              .#{$ns}Form-control>div {
                background: transparent;

                .#{$ns}TransferDropDown-content {
                  // background-color: var(--saas-SelectedBg);
                  // 2025-02-27 统一为白底
                  background-color: var(--saas-main-bg);
                }

                .#{$ns}Number-handler {
                  background: transparent;
                }

                .#{$ns}Cell-img-wrapper-isImage {
                  background: transparent;
                }

                &.is-disabled {
                  background: var(--Form-input-onDisabled-bg);
                  &.is-pcImage {
                    background: transparent;
                    > span {
                      flex-wrap: wrap;
                    }
                  }
                }
              }
              
              .#{$ns}Form-value {
                .#{$ns}ImageControl {
                  display: flex;
                  align-items: center;
                  // 2025-03 预览模式 hover显示背景
                  &-dropzone {
                    &.is-disabled {
                      .#{$ns}Cell-img-wrapper,
                      .#{$ns}Cell-img-wrapper-isImage {
                        .#{$ns}Cell-img {
                          width: 66px;
                          height: 66px;
                          box-sizing: content-box;
                          margin: 4px !important;
                        }
                        &:hover {
                          box-shadow: 0px 0px 4px rgba(0, 0, 0, .1);
                          background: rgba(0, 0, 0, .1);
                        }
                      }
                    }
                  }
                }
              }
              .#{$ns}TransferDropDown-content {
                background-color: var(--saas-main-bg);
              }
              .#{$ns}TransferDropDown-footer {
                background-color: var(--saas-SelectedBg);
              }

              .#{$ns}InputTable {
                padding-left: 0;
                padding-right: 0;
                .cell.full-cell {
                  .#{$ns}Form-control {
                    padding-right: 3px;
                  }
                }
              }
            }

            background: var(--Form-input-bg);
            >.ellipsis-cell {
              .#{$ns}Form-item.view-details {
                
                .#{$ns}Form-static {
                  display: flex;
                  align-items: center;

                  .#{$ns}Form-control {
                    flex: 1;
                    width: 100%;
                  }
                }
              }

              .#{$ns}Form-static .#{$ns}Form-control {
                position: relative;

                span.#{$ns}PlainField,
                span.#{$ns}DateField {
                  @include ellipsis();
                  display: inline-block;
                  vertical-align: middle;
                }

                .#{$ns}Field-popOverWrap {
                  @include ellipsis();
                }

                .#{$ns}Form-static-pop {
                  white-space: nowrap;
                  position: fixed;
                  background: var(--PopOver-bg);
                  top: 0;
                  left: 0;
                  z-index: 1300;
                  padding: 0 10px;
                  max-width: 400px;
                  max-height: 400px;
                  overflow: auto;
                  margin: 0;
                  white-space: pre-wrap;
                  font-weight: var(--fontWeightNormal);
                  letter-spacing: normal;
                  line-height: var(--lineHeightBase);
                  font-size: var(--fontSizeBase);
                  box-shadow: var(--boxShadow);
                  border: var(--borderWidth) solid var(--borderColor);
                  border-radius: var(--borderRadius);

                  &::-webkit-scrollbar {
                    width: 4px;
                  }
                }

                .#{$ns}TplField {
                  word-break: break-all;
                }

                .#{$ns}Tpltab {
                  span.#{$ns}TplOpen {
                    width: calc(100% - 20px);
                  }
                }
              }
              .#{$ns}ImageControl {
                // 如果预览模式下没有图片，则将form-item 的margin设置为0
                &:has(div.is-empty.#{$ns}ImageControl-dropzone) {
                  margin: 0;
                }
              }
              .#{$ns}ImageControl-dropzone.is-empty {
                padding: 6px 0;
              }

              .#{$ns}TplField {
                @include ellipsis();
                // 2025-03 富文本预览模式的text覆盖换行样式
                &.#{$ns}Static-Html-TplOpen {
                  white-space: unset;
                  max-height: 300px;
                  overflow: auto;
                }
              }
            }

            .#{$ns}Table-horizontal {
              .#{$ns}Table-headToolbar {
                margin: 0;
                border-top: 1px solid var(--borderColor);
              }

              .#{$ns}Table-content {
                thead>tr {
                  th:nth-child(1) {
                    border-left: none;
                  }
                  th:last-child {
                    border-right: none;
                  }
                }
                tbody>tr {
                  td:nth-child(1) {
                    border-left: none;
                  }
                  td:last-child {
                    border-right: none;
                  }
                }
              }
            }

            .#{$ns}Form-control>.#{$ns}Table {
              margin-bottom: 0;
            }

            .fieldTable-block {
              height: 8px;
              border-bottom: 1px solid var(--borderColor);
            }

            .item-simple-mode {
              height: 41px;
              line-height: 41px;
              margin-top: 8px;
              padding-left: 12px;
              background: var(--Property-label-bg);
              font-size: var(--fontWeightNormal);
              border-bottom: 1px solid #ebedf1;
              border-top: 1px solid #ebedf1;
            }
          }
          .property-formitem-label, .property-formitem-value {
            border-right: 1px solid var(--borderColor);
            min-height: 32px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
          .property-formitem-value {
            padding: 0 4px;
          }
          &:last-child {
            .property-formitem-value {
              border-right: none;
            }
          }
        }
        &-normal-item {
          width: 100%;
        }
        &:last-child {
          border-bottom: none;
        }
        .property-formitem-value {
          &.bg-primary {
            background: var(--saas-Table-Row-Primary) !important;
          }
          &.bg-success {
            background: var(--saas-Table-Row-Success) !important;
          }
          &.bg-info {
            background: var(--saas-Table-Row-Info) !important;
          }
          &.bg-warning {
            background: var(--saas-Table-Row-Warning) !important;
          }
          &.bg-danger {
            background: var(--saas-Table-Row-Danger) !important;
          }
          &.text-primary {
            color: #3574EE !important;
          }
          &.text-success {
            color: #52C41A  !important;
          }
          &.text-info {
            color: #13A8A8  !important;
          }
          &.text-warning {
            color: #FDA71E  !important;
          }
          &.text-danger {
            color: #F5222D !important;
          }
          .#{$ns}Grid {
            &-col--sm6:last-child {
              border-bottom: none;
            }
            &-col--sm12:last-child {
              border-bottom: none;
            }
          }
          .#{$ns}RadiosControl .#{$ns}Checkbox, .#{$ns}CheckboxesControl .#{$ns}Checkbox {
            margin-bottom: 0;
          }
        }
        .#{$ns}InputTable {
          .#{$ns}Property {
            &-wrapper {
              border: none;
              .#{$ns}Property-wrapper-content-row:last-child {
                border-bottom: 1px solid var(--borderColor);
              }
            }
          }
        }
      }
    }
  }
}