@import '../../style/variables.less';
@import '../components/base/SwitchCheckbox/style/index.less';
@import '../components/base/TimePicker/style/index.less';
@import '../components/base/TextArea/index.less';
@import '../components/combination/FormList/style/index.less';
@import '../components/combination/ProTimeLimit/style/index.less';
@import '../components/combination/ProCascader/style/index.less';
@import '../components/combination/ProNumberRange/style/index.less';
@import '../components/combination/ProModalSelect/style/index.less';
@import '../components/combination/Group/style/index.less';
@import '../components/combination/Container/style/index.less';

.pro-form {
  .pro-container {
    .pro-collapse {
      .pro-collapse-panel {
        .@{ant-prefix}-collapse-header {
          border-radius: var(--zaui-border-radius, 8px) !important;
        }
        &.@{ant-prefix}-collapse-item-active {
          .@{ant-prefix}-collapse-header {
            border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0 !important;
          }
        }
      }
    }
    .pro-collapse-content {
      margin: 0;
      border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
    }
  }
  .@{ant-prefix}-input-disabled {
    border-radius: 6px !important;
  }
  &.@{ant-prefix}-form-vertical {
    .@{ant-prefix}-form-item .@{ant-prefix}-form-item-label {
      flex: none !important;
    }

    .pro-form-custom-footer {
      display: flex;
      align-items: center;
      height: auto;
      margin-bottom: 0;
      padding-top: 6px;

      .@{ant-prefix}-space-align-center {
        align-items: normal;
      }
    }
  }

  .pro-modal-select-parent-open .@{ant-prefix}-tooltip {
    display: none !important;
  }

  .@{ant-prefix}-form-item-control-input {
    flex-grow: 1;
    max-width: 100%;
  }

  span.@{ant-prefix}-input-clear-icon {
    display: unset;
    visibility: hidden;
  }

  .@{ant-prefix}-input-affix-wrapper:hover span.@{ant-prefix}-input-clear-icon {
    display: unset;
    visibility: unset;
  }

  .@{ant-prefix}-input-affix-wrapper:hover
    span.@{ant-prefix}-input-clear-icon[class~='ant-input-clear-icon-hidden'] {
    display: unset;
    visibility: hidden;
  }

  &.pro-form-view {
    .pro-group {
      .@{ant-prefix}-space-item,
      .pro-form-view-container {
        width: max-content;
      }
    }
    .@{ant-prefix}-form-item-label {
      label {
        color: var(--zaui-aide-text, #939599);
      }
    }

    .@{ant-prefix}-form-item {
      margin-bottom: 0 !important;
    }

    .@{ant-prefix}-form-item {
      .@{ant-prefix}-tree-icon-hide input {
        display: none !important;
      }
    }
  }

  .@{ant-prefix}-picker-range {
    width: 100%;
  }

  .pro-form-list-line {
    .@{ant-prefix}-row {
      width: 100%;
    }
  }

  // 展开折叠按钮
  .expand-button {
    line-height: 32px;
    cursor: pointer;

    .rotate-to-top {
      transform: rotate(90deg);
    }

    .rotate-to-bottom {
      transform: rotate(-90deg);
    }
  }

  .@{ant-prefix}-form-item {
    &.pro-form-item-width-auto {
      .@{ant-prefix}-form-item-control-input {
        width: 100%;
        flex-grow: inherit;
      }

      .@{ant-prefix}-form-item-control-input-content {
        width: 100%;
        flex: initial;
      }
    }

    .@{ant-prefix}-form-item-tooltip {
      svg {
        width: 14px;
        height: 14px;
        vertical-align: bottom;
        fill: @zaui-aide-text;
      }
    }

    .@{ant-prefix}-row {
      width: 100%;
    }

    .@{ant-prefix}-col.@{ant-prefix}-col-0 {
      display: none;
    }

    .@{ant-prefix}-input-number {
      width: 100%;
    }

    .pro-number-range {
      .@{ant-prefix}-input-number {
        width: calc(50% - 16px);
      }

      .range-right {
        .@{ant-prefix}-input-number {
          border-left: none;
        }

        .range-right {
          width: 100%;
          border: 1px solid @zaui-form-control-line;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
  }

  .@{ant-prefix}-form-item-hidden {
    display: none;
  }

  .@{ant-prefix}-form-item-label {
    > label {
      white-space: pre-wrap;
      word-break: break-all;
      text-wrap: inherit;
    }
  }

  .suffix-value {
    margin-left: @zaui-space-size-sm;
  }

  .pro-form-input-space-compact {
    .@{ant-prefix}-btn {
      color: #333;
    }
  }

  .@{ant-prefix}-form-item-has-error {
    .group-separator {
      color: #ff4d4f;
      border-color: #ff4d4f;
    }

    .site-input-split {
      border-color: @zaui-danger;
    }
    .pro-form-input-space-compact {
      .@{ant-prefix}-btn {
        color: @zaui-danger;
        border-color: @zaui-danger;
      }
    }
    .pro-tree-modal {
      .pro-enum-input-addonAfter {
        border-color: @zaui-danger;
        color: @zaui-danger;
      }
    }
  }

  .site-input-group-wrapper {
    // 范围值表单样式
    & .site-input-split {
      text-align: center;
      background-color: @zaui-table-strip-bg;

      &.site-input-split-disabled {
        background-color: @zaui-disabled-bg;
      }
    }

    & .site-input-right {
      border-left-width: 0;
    }

    & .site-input-right:focus {
      border-left-width: 1px;
    }

    & .@{ant-prefix}-input-rtl.site-input-right {
      border-right-width: 0;
    }

    & .@{ant-prefix}-input-rtl.site-input-right:hover,
    & .@{ant-prefix}-input-rtl.site-input-right:focus {
      border-right-width: 1px;
    }

    .@{ant-prefix}-form-item {
      margin-bottom: 0;
    }

    .site-input-left,
    .site-input-right {
      width: calc(50% - 16px);
    }

    .site-input-left {
      .@{ant-prefix}-input-number {
        border-right: none;
      }
    }

    .site-input-right {
      .@{ant-prefix}-input-number {
        border-left: none;
      }
    }

    &.@{ant-prefix}-input-group.@{ant-prefix}-input-group-compact > *:not(:last-child) {
      margin-right: 0;
    }

    > *:first-child {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;

      > .@{ant-prefix}-select-selector {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
      }
    }

    > *:last-child {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;

      > .@{ant-prefix}-select-selector {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
      }
    }
  }

  .@{ant-prefix}-input-group.@{ant-prefix}-input-group-compact > * {
    float: none;
    vertical-align: top;
  }

  .pro-form-control {
    display: flex;
  }

  .noDisabled {
    color: @zaui-disabled-text;
    font-size: var(--zaui-font-size, 14px);
    background-color: transparent;
    border: none;
    cursor: default;
    opacity: 1;
  }

  div.pro-form-custom-footer {
    width: unset !important;
    height: 32px;
    margin-bottom: calc(var(--zaui-height-size-md, 16px) * var(--zaui-size, 1));

    &.pro-form-custom-footer-hidden {
      display: none;
    }
  }

  .pro-form-view-container {
    display: inline-block;
    word-break: break-all;
  }

  .pro-form-view-container_nowrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
  }

  .full-form-item {
    width: 100%;
  }

  .delete-icon {
    width: 18px;
  }
  .pro-form-list-tool-btn {
    padding: 0 4px;
    cursor: pointer;
    .anticon {
      color: var(--zaui-text-weak, #a0a0a0);
      font-size: 16px;
      vertical-align: middle;
    }
  }

  .pro-form-list-mode-block {
    .pro-collapse-content {
      .@{ant-prefix}-row {
        width: auto;
      }
    }
  }

  .pro-form-item-changed {
    border-radius: 4px;
    background: @zaui-contract-bg !important;

    .pro-address {
      .@{ant-prefix}-cascader {
        background: @zaui-contract-bg !important;
      }
    }

    .@{ant-prefix}-input,
    .@{ant-prefix}-select {
      background: @zaui-contract-bg !important;
      border-radius: 6px;
    }
    .@{ant-prefix}-select.@{ant-prefix}-select-disabled .@{ant-prefix}-select-selector {
      background: @zaui-contract-bg !important;
    }

    .ant-picker-clear {
      background: @zaui-contract-bg;
    }

    span.@{ant-prefix}-input-affix-wrapper,
    .@{ant-prefix}-select .@{ant-prefix}-select-selector,
    .@{ant-prefix}-picker,
    .@{ant-prefix}-input-number {
      background: @zaui-contract-bg !important;

      input {
        background: transparent !important;
      }
      .@{ant-prefix}-select-selection-placeholder {
        // z-index: 9;
      }
    }

    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
      background: @zaui-contract-bg;
      border-radius: 4px;
    }

    // 地址组件
    .@{ant-prefix}-form-item-control-input-content {
      // 查看模式
      & > span {
        border-radius: 4px;
        padding: 5px 8px;
        background: @zaui-contract-bg;
      }

      & > .pro-address {
        .@{ant-prefix}-select-selector,
        .@{ant-prefix}-input-affix-wrapper,
        .@{ant-prefix}-input-disabled {
          background: @zaui-contract-bg;
        }
      }
      & > .@{ant-prefix}-input-group {
        .forever-checkbox {
          background: @zaui-contract-bg;
        }
      }
    }

    // checkbox
    .@{ant-prefix}-checkbox-group,
    .pro-switch-checkbox {
      padding: 5px 0;
    }
    // switch
    &:has(.@{ant-prefix}-switch) {
      padding: 5px 0;
    }

    // textArea
    .@{ant-prefix}-input-textarea > textarea {
      background: @zaui-contract-bg !important;
    }

    .pro-form-view-container {
      padding: 4px 8px;
      background: @zaui-contract-bg;
      border-radius: 4px;
    }
  }

  // 比较原始值场景下  不同时的样式
  .pro-form-item-add {
    border-radius: 4px;
    background: @zaui-contract-bg-add !important;

    .@{ant-prefix}-input {
      background: @zaui-contract-bg-add !important;
    }

    .@{ant-prefix}-select.@{ant-prefix}-select-disabled .@{ant-prefix}-select-selector {
      background: @zaui-contract-bg-add !important;
    }

    .ant-picker-clear {
      background: @zaui-contract-bg-add;
    }

    span.@{ant-prefix}-input-affix-wrapper,
    .@{ant-prefix}-select .@{ant-prefix}-select-selector,
    .@{ant-prefix}-picker,
    .@{ant-prefix}-input-number {
      background: @zaui-contract-bg-add !important;

      input {
        background: transparent !important;
      }
      .@{ant-prefix}-select-selection-placeholder {
        // z-index: 9;
      }
    }

    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
      background: @zaui-contract-bg-add;
      border-radius: 4px;
    }

    // 地址组件
    .@{ant-prefix}-form-item-control-input-content {
      // 查看模式
      & > span {
        border-radius: 4px;
        padding: 5px 8px;
        background: @zaui-contract-bg-add;
      }

      & > .pro-address {
        .@{ant-prefix}-select-selector,
        .@{ant-prefix}-input-affix-wrapper,
        .@{ant-prefix}-input-disabled {
          background: @zaui-contract-bg-add;
        }
      }
      & > .@{ant-prefix}-input-group {
        .forever-checkbox {
          background: @zaui-contract-bg-add;
        }
      }
    }

    // checkbox
    .@{ant-prefix}-checkbox-group,
    .pro-switch-checkbox {
      padding: 5px 0;
    }
    // switch
    &:has(.@{ant-prefix}-switch) {
      padding: 5px 0;
    }

    // textArea
    .@{ant-prefix}-input-textarea > textarea {
      background: @zaui-contract-bg-add !important;
    }

    .pro-form-view-container {
      padding: 4px 8px;
      background: @zaui-contract-bg-add;
      border-radius: 4px;
    }
  }
}

.original-value-tooltip {
  width: max-content;
  max-width: 100%;
  .changed-tooltip {
    .original-value-container {
      .ant-space-item:nth-child(1) {
        white-space: nowrap;
      }
      .pro-group {
        .ant-space-compact {
          display: block;
        }
        .pro-form-view-container {
          word-break: keep-all;
        }
      }
    }
    .current-value-container {
      .ant-space-item:nth-child(1) {
        white-space: nowrap;
      }
    }
  }
}

.original-value-tooltip-fixed {
  position: fixed;
}