@prefix: ob-table;
@subTitleColor: #5c6b8a;
@actionColor: #1677ff;
@tablesRowSelectedBgColor: #eaf1ff;
@tablesRowEvenBgColor: #f8fafe;
@tablesHeadColor: #5c6b8a;
@nestingTablesBg: #f8fafe;
@colorBgContainer: #ffffff;
@colorFillQuaternary: #f8fafe;
@colorPrimaryBgHover: #eaf1ff;
@colorTextBase: #132039;
@colorBgBase: #ffffff;
@colorPrimaryBg: #eaf1ff;
@colorTextSecondary: #364563;
@blue: #1677ff;

html,
body,
#root {
  min-width: 1040px;
  height: 100%;
  margin: 0 !important;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

#root {
  .ant-pro-card {
    border-radius: 8px !important;
  }

  .ant-row {
    margin-right: 0px !important;
    margin-left: 0px !important;
  }
  /* primary btn */
  .ant-btn-primary:not([disabled]):not(.ant-btn-background-ghost) {
    background: linear-gradient(-45deg, #002bff 0%, #0080ff 100%);
    border: none;
    box-shadow: none;
    &:hover {
      background: linear-gradient(-45deg, #002bff 60%, #0080ff 100%);
    }
    &:active {
      background: linear-gradient(-45deg, #002bff 90%, #0080ff 100%);
    }
  }

  /* Table */
  .ant-table {
    .ant-table-thead {
      tr {
        td,
        th {
          padding: 12px 16px;
          // 弱化列标题字体
          color: #5c6b8a;
          font-weight: normal;
          font-size: 14px;
          line-height: 22px;
          background-color: @colorBgContainer;
        }
      }
    }
    .ant-table-tbody {
      tr {
        td {
          padding: 12px 16px;
          // 去掉表格边框
          border: none;
          // 去掉 hover 时的背景圆角
          border-radius: 0;
        }
      }
      // 斑马纹样式
      tr:nth-child(2n + 1):not(.ant-table-placeholder) {
        td {
          background-color: @colorBgContainer;
        }
      }
      tr:nth-child(2n):not(.ant-table-placeholder) {
        td {
          background-color: @colorFillQuaternary;
        }
      }
      // 伪类选择器样式优先级: hover < nth-child，因此需要将 hover 样式写到后面
      tr:not(.ant-table-placeholder):hover {
        td {
          background-color: @colorPrimaryBgHover;
        }
      }
    }
  }

  /* ob-table */
  .@{prefix}.ant-table-wrapper {
    color: @colorTextBase;
    font-size: 14px;
    background: @colorBgBase;
    border-radius: 8px;
    .ant-table-thead > tr > th {
      padding: 12px 16px !important;
      color: @tablesHeadColor;
      line-height: 22px;
      background: @colorBgBase;
    }
    .ant-table-thead > tr > td.ant-table-row-expand-icon-cell {
      background: @colorBgBase;
    }
    .ant-table-tbody > tr > td {
      padding: 12px 16px;
      border: none !important;
      border-radius: 0;
    }
    .ant-table-tbody > tr.ant-table-row:hover > td:first-child {
      border-radius: 0 !important;
    }
    .ant-table-tbody > tr.ant-table-row:hover > td:last-child {
      border-radius: 0 !important;
    }
    .ant-table-tbody .ant-table-row:nth-child(2n - 1) {
      background: @colorFillQuaternary;
    }
    .ant-table-tbody .ant-table-expanded-row td {
      background: @colorBgBase;
    }
    .ant-table-tbody > tr.ant-table-row-selected > td {
      box-sizing: border-box;
      background: @colorPrimaryBg !important;
      border-bottom: 1px solid @colorBgBase !important;
    }
    .ant-table:not(.ant-table-bordered)
      .ant-table-tbody
      > tr.ant-table-row.ant-table-row-selected
      > td:first-child,
    .ant-table:not(.ant-table-bordered)
      .ant-table-tbody
      > tr.ant-table-row.ant-table-row-selected
      > td:last-child {
      border-radius: 0;
    }
    .@{prefix}-footer-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .ant-pagination-total-text {
      display: flex;
      flex-grow: 1;
      justify-content: flex-end;
    }
    .@{prefix}-total-options-bar {
      margin-right: 24px;
    }
    .@{prefix}-total-text {
      color: @colorTextSecondary;
      font-weight: 500;
      font-size: 14px;
    }
    .@{prefix}-total-number {
      margin: 0 8px;
      color: @blue;
    }
    .@{prefix}-option-bar-cancel,
    .@{prefix}-option-bar-open {
      color: @blue;
      cursor: pointer;
    }
    .ant-pagination.ant-table-pagination {
      margin: 16px 24px;
      padding: 0;
      overflow: hidden;
      background: @colorBgBase;
      border-radius: 8px;
    }

    // 嵌套表格样式
    .ant-table-tbody > tr > td > .ant-table-wrapper:only-child .ant-table,
    .ant-table.ant-table-middle
      .ant-table-tbody
      .ant-table-wrapper:only-child
      .ant-table,
    .ant-table.ant-table-small
      .ant-table-tbody
      .ant-table-wrapper:only-child
      .ant-table {
      margin-block: 0;
      margin-inline: 0;
    }
    .ant-table-cell {
      .@{prefix} {
        background: @colorFillQuaternary;
        .ant-table-thead > tr > th {
          background: @colorFillQuaternary;
        }
        .ant-table-tbody .ant-table-row td {
          background: @colorFillQuaternary;
        }
      }
    }
  }

  .@{prefix}-tool-selected-content.ant-popover {
    .ant-popover-content {
      .ant-popover-inner {
        padding: 0;
        .ant-popover-inner-content {
          padding: 0;
        }
      }
    }
  }

  .@{prefix}.@{prefix}-expandable {
    .ant-table-tbody tr.ant-table-row > td {
      background: @colorBgBase;
    }
    .ant-table-tbody tr:nth-child(2n) td {
      background: @colorBgBase;
    }
    .ant-table-tbody tr:hover td {
      background: @colorPrimaryBg;
    }
  }

  .ant-pro-card {
    .ant-pro-card-col.ant-pro-card-split-horizontal {
      border-block-end: none !important;
    }
  }

  .ant-select {
    .ant-select-item-option-selected {
      background-color: #eaf1ff !important;
    }
    .ant-select-item-option-active:not(.ant-select-item-option-selected) {
      background-color: #e2e8f3 !important;
    }
  }

  .ant-form {
    .ant-form-item-label > label {
      color: @subTitleColor !important;
    }

    .ant-form-item-required::before {
      display: none !important;
    }
  }

  .ant-timeline {
    .ant-timeline-item-head-custom {
      background-color: rgba(0, 0, 0, 0);
    }
  }
}

/* primary btn danger */
.ant-btn-dangerous:not([disabled]):not(.ant-btn-background-ghost) {
  background: linear-gradient(-45deg, #ff4d67 0%, #ff6a80 100%);
  border: none;
  box-shadow: none;
  &:hover {
    background: linear-gradient(-45deg, #ff4d67 60%, #ff6a80 100%);
  }
  &:active {
    background: linear-gradient(-45deg, #ff4d67 90%, #ff6a80 100%);
  }
}

/* default btn */
.ant-btn-default:not([disabled]) {
  color: #132039;
  background-color: #ffffff;
  border-color: #cdd5e4;
  box-shadow: 0 2px 0 #f8fafe;
  &:hover {
    color: #004ce6;
    border-color: #004ce6;
  }
  &:active {
    color: #004ce6;
    border-color: #004ce6;
  }
}

.ant-modal-confirm {
  .ant-modal-confirm-body {
    .ant-modal-confirm-title {
      color: #132039 !important;
    }
    .ant-modal-confirm-content {
      color: #5c6b8a !important;
    }
  }
}

.error-color {
  background-image: linear-gradient(-52deg, #ff4d67 2%, #ff6a80 97%);
}

.warning-color {
  background-image: linear-gradient(131deg, #fbe031 0%, #f6bd16 100%);
}

.default-tag {
  color: #8592ad !important;
  font-weight: normal !important;
  font-size: 12px !important;
  background-color: #f8fafe;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-inline-end: 0 !important;
}

.green-tag {
  color: #0ac185 !important;
  font-weight: normal !important;
  background-color: #eef8f5;
  border: 1px solid #b3e6d5;
  margin-inline-end: 0 !important;
}

.blue-tag {
  color: #006aff !important;
  font-weight: normal !important;
  background-color: #eaf1ff;
  border: 1px solid #b3ccff;
  margin-inline-end: 0 !important;
}

.ml-8 {
  margin-left: 8px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-20 {
  margin-left: 20px;
}

.mr-6 {
  margin-right: 6px;
}

.mr-10 {
  margin-right: 10px;
}

.remind-color {
  color: #ffac33 !important;
}

.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.form-item-no-bottom {
  margin-bottom: 0 !important;
}

.list-tooltip {
  .ant-tooltip-inner {
    max-height: 200px;
    overflow: auto;
    word-break: break-all;
  }
}

.card-header-padding-top-0 {
  & > .ant-pro-card-header {
    padding-top: 0px;
  }
}

.card-padding-bottom-24 {
  & > .ant-pro-card-body {
    padding-bottom: 24px;
  }
}

.card-padding-top-0 {
  & > .ant-pro-card-body {
    padding-top: 0px;
  }
}