@import '~@fexd/pro-utils/src/style.less';
@import '~@fexd/pro-form/src/style.less';
@import '~antd/es/button/style/index.less';
@import '~antd/es/badge/style/index.less';
@import '~antd/es/switch/style/index.less';
@import '~antd/es/message/style/index.less';
@import '~antd/es/space/style/index.less';
@import '~antd/es/form/style/index.less';
@import '~antd/es/tooltip/style/index.less';
@import '~antd/es/table/style/index.less';
@import '~antd/es/tag/style/index.less';
@import '~antd/es/pagination/style/index.less';
@import '~antd/es/alert/style/index.less';
@import '~antd/es/avatar/style/index.less';
@import '~antd/es/card/style/index.less';
@import '~antd/es/popconfirm/style/index.less';
@import '~antd/es/popover/style/index.less';
@import '~antd/es/time-picker/style/index.less';
@import '~antd/es/date-picker/style/index.less';
@import '~antd/es/input-number/style/index.less';
@import '~antd/es/input/style/index.less';
@import '~antd/es/select/style/index.less';
@import '~antd/es/modal/style/index.less';
@import '~antd/es/result/style/index.less';
@import '~antd/es/empty/style/index.less';
@import '~antd/es/grid/style/index.less';
@import '~antd/es/dropdown/style/index.less';
@import '~antd/es/menu/style/index.less';
@import '~antd/es/progress/style/index.less';
@import '~antd/es/typography/style/index.less';
// @import '~antd/es/textarea/style/index.less';
@import '~antd/es/checkbox/style/index.less';
@import '~antd/es/rate/style/index.less';
@import '~antd/es/radio/style/index.less';
@import '~antd/es/cascader/style/index.less';
@import '~antd/es/descriptions/style/index.less';

@pro-table-prefix: ~'f-pro-table';

.@{pro-table-prefix}-wrapper-fullscreen .@{pro-table-prefix}-body .@{pro-table-prefix}-modal {
  &-grey-body {
    .ant-modal-body {
      background: #f5f5f5;
    }
  }

  .ant-card-head::before {
    display: block;
  }
}

.@{pro-table-prefix}-wrapper {
  position: relative;

  .ant-btn-two-chinese-chars > .ant-btn-loading-icon {
    margin-right: 0;
  }

  &-fullscreen {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    overflow: auto;
    background: #f5f5f5;

    .@{pro-table-prefix}-body {
      padding: 24px;
    }

    .@{pro-table-prefix}-small.@{pro-table-prefix}-body {
      padding: 16px;
    }
  }
}

.@{pro-table-prefix}-scroll-block {
  overflow: hidden !important;
}

.@{pro-table-prefix}-body {
  position: relative;
  width: 100%;
  display: flex;
}

.@{pro-table-prefix}-query {
  padding: 24px 24px 8px;
  background: #fff;

  &-bordered {
    border: solid 1px #f2f2f2;
  }

  &-horizontal {
    padding-bottom: 0;
  }
}

.@{pro-table-prefix}-grid-field {
  overflow: hidden;
  background: #fff;

  > .kl-grid {
    margin: 0 -16px;
  }

  .kl-grid-item {
    overflow: hidden;
  }

  .kl-grid-item-content {
    padding: 0 16px;
  }

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

  .ant-space,
  .ant-form-item-control-input-content > div {
    width: 100%;
  }
}

.@{pro-table-prefix}-query-form-actions {
  width: 100%;
  justify-content: flex-end;
  overflow: hidden;
  // text-align: right;
}

.@{pro-table-prefix}-extra {
  background: #fff;
}

.@{pro-table-prefix}-main {
  position: relative;
  padding: 0 24px 24px;
  background: #fff;

  &-bordered {
    border: solid 1px #f2f2f2;
  }

  &-no-toolbar {
    padding-top: 24px;
  }
}

.@{pro-table-prefix}-toolbar {
  position: relative;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;

  & > .ant-space {
    width: auto;
  }
}

.@{pro-table-prefix}-title {
  font-size: 16px;
}

.@{pro-table-prefix}-actions {
  // padding: 12px 0;
  background: #fff;
}

.@{pro-table-prefix}-settings {
  background: #fff;
}

html .@{pro-table-prefix}-alert {
  margin-bottom: 16px;

  .@{pro-table-prefix}-alert-content {
    display: flex;
    justify-content: space-between;

    &-tips {
      font-size: 14px;
    }
  }
}

.@{pro-table-prefix}-table {
  background: #fff;

  table tr th.ant-table-selection-column,
  table tr td.ant-table-selection-column {
    padding-right: 16px;
    padding-left: 16px;
  }

  .ant-checkbox-checked .ant-checkbox-inner::after {
    transition: none;
  }

  .ant-checkbox-checked::after {
    animation: none;
  }

  .ant-table-sticky-scroll {
    display: none;
  }

  & .ant-upload-list-item:first-child {
    margin-top: 0;
  }

  &-sticky {
    .ant-table-pagination.ant-pagination {
      margin: 0;
      padding: 16px 0;
      background: #fff;
      border-top: solid 1px #f2f2f2;
      position: sticky;
      bottom: 0;
      z-index: 100;
    }

    .@{pro-table-prefix}-sticky-scrollBar-container {
      position: sticky;
      bottom: 0;
      z-index: 100;
    }

    .@{pro-table-prefix}-sticky-scrollBar {
      position: absolute;
      width: 100%;
      top: 0;
      transform: translateY(-100%);
      overflow-y: hidden;
      overflow-x: auto;
      background-color: #fff;
      border-top: solid 1px #f2f2f2;
      border-bottom: solid 1px #f2f2f2;

      > div {
        height: 1px;
      }
    }
  }

  .ant-switch-inner {
    white-space: nowrap;
  }

  .ant-select {
    min-width: 120px;
  }

  .ant-table-row .ant-table-cell {
    .@{pro-form-prefix}-item {
      margin-bottom: 0;
    }
  }

  .ant-table-cell-ellipsis {
    .@{pro-table-prefix}-ellipsis-cell {
      display: inline-flex;
      align-items: center;
      max-width: 100%;

      .f-pro-utils-ellipsis-tooltip {
        display: inline-block;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: keep-all;
      }
    }

    .@{pro-table-prefix}-cell-placeholder {
      max-width: 100%;

      &-content {
        max-height: 100px;
      }
    }
  }

  .@{pro-table-prefix}-pagination-item-link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 12px;
    text-align: center;
    // background: #fff;
    // border: 1px solid #d9d9d9;
    border-radius: 2px;
    outline: none;
    transition: all 0.3s;

    .anticon {
      font-size: inherit;
      color: inherit;
    }
  }

  .@{pro-table-prefix}-pagination {
    .ant-select {
      width: auto;
    }
  }

  .@{pro-table-prefix}-header-no-ellipsis {
    .ant-table-thead .ant-table-cell-ellipsis {
      white-space: inherit;
      text-overflow: inherit;
      word-break: inherit;
    }
  }

  .mini {
    .@{pro-table-prefix}-pagination-item-link {
      border: none;
    }

    &.@{pro-table-prefix}-no-total {
      .ant-pagination-item-active {
        .ant-input {
          padding: 0 7px;
          width: 44px;
          height: 24px;
        }
      }
    }
  }

  .@{pro-table-prefix}-no-total {
    .ant-pagination-item-active {
      border: none;

      .ant-input {
        text-align: center;
        width: 50px;
      }
    }
  }

  // .ant-pagination {
  //   .ant-btn {
  //     font-size: 12px;
  //     // color: rgba(0, 0, 0, 0.85);

  //     .anticon {
  //       font-size: inherit;
  //       color: inherit;
  //     }
  //   }

  //   &.mini {
  //     .ant-btn-text {
  //       border: none;
  //     }
  //   }
  // }
}

.@{pro-table-prefix}-query-action-popover {
  .ant-popover-inner-content {
    padding: 0;
  }

  &-content {
    padding: 8px 16px;
    width: 370px;
    max-height: 37vh;
    overflow: auto;
  }

  &-footer {
    padding: 8px 16px;
    border-top: 1px solid #f0f0f0;
  }
}

.dark .@{pro-table-prefix}-query-action-popover-footer {
  border-top-color: #303030;
}

.@{pro-table-prefix}-mini {
  .@{pro-table-prefix} {
    &-batch-toolbar {
      padding: 4px 10px;
    }

    &-query {
      padding: 12px 16px 4px;
    }

    &-title {
      font-size: 14px;
    }

    &-alert {
      margin-bottom: 10px;

      .ant-alert {
        padding: 6px 10px;
        font-size: 12px;
      }
    }

    &-toolbar {
      padding: 10px 0;
    }

    &-main {
      padding: 0 16px 12px;
    }

    &-table-sticky {
      .ant-pagination {
        padding: 12px 0;
      }

      .ant-table-pagination.ant-pagination {
        padding: 12px 0;
      }
    }

    &-alert-content-tips {
      font-size: 13px;
    }
  }

  .f-pro-table-columns-actions {
    padding: 0;
  }

  .ant-btn-sm,
  .ant-breadcrumb,
  .ant-menu,
  .ant-form-item,
  .ant-badge,
  .ant-badge-status-text,
  .ant-tooltip,
  .ant-pagination,
  .ant-table,
  .ant-table.ant-table-middle,
  .ant-table.ant-table-small,
  .ant-transfer-list-body {
    font-size: 12px;
  }

  .ant-checkbox-inner,
  .ant-radio {
    transform: scale(0.9);
  }

  .ant-transfer-list-content-item {
    min-height: 26px;
    padding: 4px 8px;
  }

  .ant-transfer-list-header {
    height: 32px;
    padding: 6px 10px 8px;
  }

  .ant-transfer-list-body-search-wrapper {
    padding: 10px;
  }

  .ant-form & label {
    font-size: 12px;
  }

  .anticon {
    font-size: 14px;
  }
}

.@{pro-table-prefix}-cell-placeholder {
  display: inline-block;
  background-color: #fafafa;
  min-width: 100%;

  &-content {
    opacity: 0;
    display: inline-block;
    min-width: 70px;
    word-break: break-all;
  }
}

.@{pro-table-prefix}-resizable {
  position: relative;
  background-clip: padding-box;
}

.@{pro-table-prefix}-resizable-handle {
  position: absolute;
  right: -5px;
  bottom: 0;
  z-index: 1;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}

.@{pro-table-prefix}-column-action-placeholder {
  width: 100%;
  min-width: 60px;
  text-align: center;
}

.@{pro-table-prefix}-row-clickable {
  cursor: pointer;
}

.@{pro-table-prefix}-expanded-row {
  background: #fff;
}

.f-pro-table-column-setting {
  &-dragable {
    &-container {
      // border-left: solid 1px;
    }

    &-item {
      user-select: none;
      display: flex;
      align-items: center;
      padding-left: 6px;
      padding-right: 6px;

      &-helper {
        border: 1px solid #1890ff;
        background-color: #fff;
        opacity: 0.5;
      }

      &-icon {
        font-size: 14px;
        margin-right: 12px;
        cursor: grab;

        &.anticon {
          color: #ccc;
        }
      }
    }
  }

  &-popover {
    width: auto;

    .ant-checkbox-wrapper {
      display: flex;
    }

    .ant-popover-inner-content,
    .ant-checkbox-group,
    .ant-checkbox-wrapper {
      width: 100%;
    }

    .ant-popover-inner-content {
      padding-left: 6px;
      padding-right: 6px;
    }

    // &-container {
    //   display: flex;
    //   flex-direction: row;
    //   padding: 8px;
    // }
  }
}

.dark {
  .f-pro-table-main,
  .f-pro-table-query,
  .f-pro-table-grid-field,
  .f-pro-table-toolbar,
  .f-pro-table-table,
  .f-pro-table-table-sticky .ant-table-pagination.ant-pagination,
  .f-pro-table-actions,
  .f-pro-table-settings,
  .f-pro-table-table-sticky .f-pro-table-sticky-scrollBar {
    background: #141414;
  }

  .f-pro-table-cell-placeholder {
    background-color: #333;
  }

  .f-pro-table-pure {
    .f-pro-table-main,
    .f-pro-table-query,
    .f-pro-table-grid-field,
    .f-pro-table-toolbar,
    .f-pro-table-table,
    .f-pro-table-table-sticky .ant-table-pagination.ant-pagination,
    .f-pro-table-actions,
    .f-pro-table-settings,
    .f-pro-table-table-sticky .f-pro-table-sticky-scrollBar {
      background: transparent;
    }
  }

  .f-pro-table-main-bordered,
  .f-pro-table-query,
  .f-pro-table-table-sticky .f-pro-table-sticky-scrollBar,
  .f-pro-table-table-sticky .ant-table-pagination.ant-pagination {
    border-color: #303030;
  }

  .f-pro-table-title {
    color: #fff;
  }

  .f-pro-table-expanded-row {
    background: transparent;
  }

  .f-pro-table-column-setting {
    &-dragable {
      &-item {
        &-helper {
          background-color: #141414;
        }

        &-icon {
          &.anticon {
            color: #666;
          }
        }
      }
    }
  }
}

.f-pro-table-columns-actions {
  padding: 0 6px;
}