@mixin targetBox {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 50%;

  .btn-group {
    padding: 0 10px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    .btn {
      width: 20px;
      height: 20px;
      margin-bottom: 30px;
      border: 1px solid var(--saas-border-color);
      border-radius: 3px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      background: #fff;
      outline: none;
      font-size: 10px;
      cursor: pointer;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .btn.disabled {
      filter: grayscale(100%);
      box-shadow: none;
      cursor: not-allowed;
      color: var(--text--muted-color);
      pointer-events: auto;
      border: var(--Button-borderWidth) solid var(--Button-onDisabled-borderColor);
      background: var(--Button-onDisabled-bg);
    }
  }
}

@mixin transferTarget {
  border-radius: 3px;
  border: 1px solid var(--saas-border-color);
  flex: 1;
  height: 100%;

  .transfer-target-header {
    flex-shrink: 0;
    height: 36px;
    background: var(--saas-crud-advanced-modle-title-color);
    padding: 0 10px;
    border-bottom: 1px solid var(--saas-border-color);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    .title {
      font-size: 14px;
      color: var(--saas-font-size-dark-black);
    }
  }

  .transfer-target-content {
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 36px);
    padding: 6px;
    flex-direction: column;

    .option {
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      flex: 1;
    }

    .option-item {
      padding: 6px 12px 6px 0;
      margin-right: 6px;
      margin-bottom: 6px;
      height: 24px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      font-size: 12px;
      background: var(--saas-crud-hover-color);
      color: var(--saas-Primary-Color);

      .icon {
        cursor: pointer;
        font-size: 16px;
      }

      .item-title {
        height: 24px;
        width: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--saas-font-size-color-reverse);
        background: var(--Table--unsaved-heading-color);
        margin-right: 8px;
      }

      .item-label {
        margin-left: 8px;
        margin-right: 8px;
        flex: 1;
        cursor: move;
        user-select: none;
        max-width: 150px;
        @include ellipsis();
        width: auto;
      }

      .close-btn {
        color: #aaa;
        cursor: pointer;
      }

      .anticon-close {
        opacity: 0;
      }

      &:hover {
        // background: var(--saas-crud-hover-color);

        .close-btn {
          display: block;
        }

        .anticon-close {
          opacity: 1;
        }
      }
    }

    .target-content-inner {
      display: flex;
      flex-wrap: wrap;
    }

    .transfer-target-footer {
      height: 16px;
      color: var(--saas-font-size-deep-black);
      font-size: 12px;
    }
  }
}

.transfer-check-group {
  margin: 10px 0px;

  .transfer-check-bat {
    color: var(--saas-font-size-black);
    border-color: transparent;
    margin: 5px;
    padding: 10px 20px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    width: 100px;
    height: 45px;
  }

  .transfer-check-bat.ant-btn-text[disabled] {
    color: var(--saas-font-size-light-black);
    border-color: transparent;
    background: transparent;
    text-shadow: none;
    box-shadow: none;
  }

  .transfer-check-bat-icon {
    background-color: #2a87eb;
    transform: rotateZ(-45deg);
    position: absolute !important;
    bottom: -3px;
    width: 40px;
    height: 20px;
    right: -13px;
    text-align: center;

    &::before {
      content: '\2713';
      color: #fff;
      transform: rotateZ(45deg);
      display: inline-block;
    }

    // /* 对号的 Unicode 编码 */
    // position: absolute;
    // bottom: 0;
    // right: -5px;
    // width: 20px;
    // height: 20px;
    // background-color: #2a87eb;
    // color: #fff;
    // line-height: 20px;
  }

  .ant-checkbox-wrapper {
    color: var(--saas-font-size-black);
  }
}

.transfer-container {
  height: 300px;
  display: flex;

  .transfer-source {
    width: calc(50% - 40px);
    height: 100%;
    border-radius: 3px;
    border: 1px solid var(--saas-border-color);
    display: flex;
    flex-flow: column nowrap;
    position: relative;

    .transfer-source-header {
      flex-shrink: 0;
      height: 36px;
      background: var(--saas-crud-advanced-modle-title-color);
      padding: 0 10px;
      border-bottom: 1px solid var(--saas-border-color);
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;

      .option-group {
        font-size: 14px;
        display: flex;

        .option {
          cursor: pointer;
          color: var(--saas-Primary-Color);
        }
      }

      .title {
        font-size: 14px;
        color: var(--saas-font-size-dark-black);
      }
    }

    .transfer-source-position {
      position: absolute;
      right: 20px;
      bottom: -32px;
      width: 120px;

      .ant-input {
        border: none;
        color: transparent;
        text-shadow: 0 0 0 #000;
        background-color: transparent;
      }

      .ant-input:focus,
      .ant-input-focused {
        box-shadow: none;
        border: none;
      }
    }

    .transfer-source-content {
      flex-grow: 1;
      overflow-y: auto;
      color: var(--saas-font-size-black);

      .source-content-inner {

        .display-field {
          display: flex;
          padding: 5px 0px 5px 10px;

          .display-field-label {
            flex: 1;
            margin-left: 5px;
            cursor: pointer;
          }
        }

        .display-field-active {
          background-color: var(--saas-crud-hover-color);
        }
      }
    }
  }

  .transfer-target-group {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    flex: 1;
  }

  .target-box {
    @include targetBox()
  }

  .transfer-target {
    @include transferTarget()
  }
}

.transfer-segment-container {
  display: flex;
  color: var(--saas-font-size-black);

  .left-content {
    width: calc(50% - 40px);

    .segment-select {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      &-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-top: 8px;

        .ant-select {
          color: var(--saas-font-size-black);

          .ant-select-selector {
            border-radius: 4px;
            background-color: var(--Form-input-bg);
            border-color: var(--DatePicker-borderColor);

            &:hover {
              border-color: #40a9ff;
            }
          }
        }

        .ant-input-number {
          color: var(--saas-font-size-black);
          border-color: var(--DatePicker-borderColor);
          background-color: var(--Form-input-bg);

          &-handler-wrap {
            background-color: var(--Form-input-bg);

            span {
              color: var(--saas-font-size-deep-black);
              border-color: var(--DatePicker-borderColor);

              &:hover {
                color: #40a9ff;
              }
            }
          }

          &-input-wrap {
            border-radius: 4px;
            background-color: var(--Form-input-bg);
          }
        }
      }
    }
  }

  .right-content {
    flex: 1;

    .transfer-target {
      @include transferTarget()
    }

    .target-box {
      @include targetBox();
      height: 80px;
    }
  }
}