@import '../../style/variables.less';

.pro-edit-label {
  display: inline-block;

  .pro-form-view {
    .@{ant-prefix}-row {
      display: block;
    }
  }

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

  &.trigger-hover {
    .anticon-edit {
      display: none;
    }

    &:hover {
      .anticon-edit {
        display: block;
      }
    }
  }

  .anticon-edit {
    padding: var(--zaui-space-size-xs, 4px);
    color: #d8d8d8;
    cursor: pointer;

    &:hover {
      color: var(--zaui-brand, #006aff);
    }

    &:active {
      background: #e3e8f0;
      border-radius: var(--zaui-border-radius-card, 4px);
    }
  }

  &.pro-edit-label-small {
    height: 24px;
  }

  &.pro-edit-label-middle {
    height: 32px;
  }

  &.pro-edit-label-large {
    height: 40px;
  }
}

.@{ant-prefix}-popover {
  .@{ant-prefix}-btn-sm {
    min-width: 56px;
    font-size: var(--zaui-font-size-sm, 12px);
    line-height: 1;

    span {
      letter-spacing: -1px;
    }
  }
}

.pro-edit-label-popconfirm {
  z-index: 1001 !important;

  .@{ant-prefix}-popover-inner-content {
    width: 100%;
  }

  .@{ant-prefix}-popconfirm-message {
    display: block;
  }

  .@{ant-prefix}-popover-message-title {
    padding-left: 0;
  }

  .@{ant-prefix}-popover-content {
    width: 360px;
    max-width: 400px;
  }

  .pro-edit-label-title {
    margin-bottom: calc(var(--zaui-space-size-sm, 8px) * var(--zaui-size; 1));
    color: var(--zaui-text, #343434);
    font-weight: 500;
    font-size: var(--zaui-font-size-lg, 16px);
  }

  .pro-edit-label-tip {
    margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
    color: #666;

    .anticon-info-circle {
      margin-top: var(--zaui-space-size-xs, 4px);
      margin-right: var(--zaui-space-size-sm, 8px);
      color: var(--zaui-warning, #ec9131);
      font-size: var(--zaui-font-size-lg, 16px);
    }
  }

  .pro-edit-label-popup {
    min-width: 300px;

    .pro-form {
      width: 100%;

      &.pro-form-no-label {
        .@{ant-prefix}-form-item-label {
          display: none;
        }
      }
    }

    .@{ant-prefix}-col-10 {
      flex: 0 0 var(--zaui-form-label-width, 130px);
      box-sizing: border-box;
      padding-right: var(--zaui-space-size-md, 16px);
      overflow: initial;
      line-height: 1;
      white-space: pre-wrap;
    }
  }

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