@use 'canvas-theme';

.p-pane {
  background-color: var(--p-theme-bg, #fff);
  padding: 16px;
  border-radius: 4px;
}

.p-search-form--single-row .p-wrapper > .ant-form > .ant-row {
  flex-wrap: nowrap;

  > .ant-col:not(:last-child) {
    flex-shrink: 1;
    min-width: 0;
  }

  > .ant-col:last-child {
    flex: none !important;
    margin-left: auto;
  }
}

.text-slate-5 {
  color: #64748b;
}
/* #region patch for env without unocss/tailwind/windicss */
.w-full {
  width: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.py-4x {
  padding-top: 4px;
  padding-bottom: 4px;
}

.px-2x {
  padding-left: 2px;
  padding-right: 2px;
}
.pl-4x {
  padding-left: 1em;
}
.pl-8 {
  padding-left: 2em;
}

.h-0 {
  height: 0;
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-4px {
  gap: 4px;
}

.gap-8px {
  gap: 8px;
}

.gap-12px {
  gap: 12px;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.min-w-0 {
  min-width: 0;
}

.min-h-0 {
  min-height: 0;
}

.pt-8px {
  padding-top: 8px;
}

.px-16px {
  padding-left: 16px;
  padding-right: 16px;
}

.mt-4px {
  margin-top: 4px;
}

.text-right {
  text-align: right;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-hidden {
  overflow: hidden;
}

/* #endregion */

/* #region P family styles */
.p-theme-bg {
  background-color: var(--p-theme-bg, #fff);
}

.p-wrapper {
  .p-form-wrapper {
    z-index: 4;
  }
  /* PGrid / PCanvasGrid 底部栏（已选统计、分页）统一间距 */
  .p-grid-footer {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 0;
  }
  .p-canvas-pagination.ant-pagination {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-left: auto;
  }
  .p-error-hang-out {
    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
        .ant-input-affix-wrapper-borderless
      ).ant-input-affix-wrapper {
      border-color: var(--p-border-color, #d9d9d9) !important;

      &:focus {
        border-color: var(--p-primary-color, #4096ff) !important;
      }
    }
    .ant-form-item-explain-error {
      opacity: 0 !important;
      transform: translateY(-10px) !important;
      max-height: 0 !important;
      overflow: hidden !important;
      transition: none !important;
    }
  }
  .ant-form-item-explain-error {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    overflow: hidden;
    transition:
      opacity 0.3s ease-out 0.3s,
      transform 0.3s ease-out 0.3s,
      max-height 0.3s ease-out 0.3s;
  }
  .ant-form-item-has-error .ant-form-item-explain-error {
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
  }
  .p-toolbar-wrapper {
    box-shadow: 0 8px var(--p-bg-color, #fff);
    border-radius: 0.5em 0.5em 0 0;
    margin-bottom: -0.5em;
  }
  .p-canvas-toolbar-wrapper {
    box-shadow: 0 8px var(--p-theme-bg, #fff);
    border-radius: 0.5em 0.5em 0 0;
  }

  .ant-form {
    .ant-form-item {
      margin-bottom: 0;

      &.p-required {
        .ant-form-item-label > label:before {
          display: inline-block;
          margin-inline-end: 4px;
          color: var(--p-danger-color, #ff4d4f);
          font-size: 14px;
          font-family: SimSun, sans-serif;
          line-height: 1;
          content: '*';
        }
      }

      .ant-form-item-label {
        display: flex;
        align-items: start;
        justify-content: flex-end;

        & > label {
          white-space: break-spaces;
          align-items: flex-start;
          height: fit-content;
          padding-top: 0.36em;

          &:after {
            padding-left: 4px;
            margin-inline-start: unset;
          }
        }
      }
    }

    &.ant-form-vertical {
      .ant-form-item {
        .ant-form-item-label {
          justify-content: flex-start;
          font-weight: 600;
        }
      }
    }
  }
  .ant-table-wrapper .ant-table {
    background-color: var(--p-table-row-bg-color, #fff);
    td.ant-table-cell {
      background-color: var(--p-table-row-bg-color, #fff);
    }
  }
  .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
    background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
  }
  .ant-table-wrapper .ant-table-pagination.ant-pagination {
    margin: unset;
    padding: 16px 0;
  }
  .ant-table-wrapper tr.p-grid-row-striped {
    background-color: var(--p-striped-bg-color, #f2f3f6);
    > td.ant-table-cell {
      background-color: var(--p-striped-bg-color, #e6e7ea);
      &.ant-table-cell-row-hover {
        background-color: var(--p-table-row-hover-bg-color, #e6e7ea);
      }
    }
  }
  .ant-table-wrapper .ant-table-thead > tr > th {
    background-color: var(--p-table-thead-bg-color, #f2f3f6);
  }
  .ant-table-sticky-scroll {
    visibility: hidden;
  }

  .ant-table-header.ant-table-sticky-holder {
    //overflow: unset !important;

    &:before {
      content: '';
      width: 100%;
      position: absolute;
      height: 22px;
      display: block;
      backdrop-filter: blur(2px);
      top: -16px;
    }
  }
  .ant-table-wrapper .ant-pagination {
    gap: 8px;

    .ant-pagination-prev,
    .ant-pagination-next {
      border: 1px solid var(--p-pagination-border-color, #bbbdbf);
    }
    .ant-pagination-total-text {
      margin-inline-end: 0;
      padding-inline-end: 8px;
    }
    .ant-pagination-item {
      border: 1px solid var(--p-pagination-border-color, transparent);
      &:not(.ant-pagination-item-active) {
        background-color: var(--p-pagination-bg-color, #fff);
        & > a {
          color: var(--p-pagination-color, #323335);
        }
        &:hover {
          background-color: var(--p-pagination-hover-bg-color, #0000000f);
          & > a {
            color: var(--p-pagination-active-color, #000000e0);
          }
        }
      }
      &.ant-pagination-item-active {
        background-color: var(--p-pagination-active-bg-color, #fff);
        border-color: var(--p-pagination-active-border-color, var(--p-primary-color, #4096ff));
        & > a {
          color: var(--p-pagination-active-color, var(--p-primary-color, #4096ff));
        }
      }
    }
  }

  .h-lack {
    .ant-table-wrapper .ant-table-pagination.ant-pagination {
      padding: unset;
      margin-top: 8px;
    }
  }
  .p-inner-scroll {
    & > .ant-table-wrapper,
    & > .p-grid-table-body > .ant-table-wrapper {
      height: 100%;

      & > .ant-spin-nested-loading {
        height: 100%;

        & > .ant-spin-container {
          height: 100%;
          display: flex;
          flex-direction: column;

          & > .ant-table {
            flex: 1;
            height: 0;
            overflow-y: hidden;
            /*border-radius: unset; 修复模糊问题 according to https://stackoverflow.com/questions/49349337/chrome-text-blur-with-overflow-yscroll-and-fixed-height*/
            border-radius: unset;

            & > .ant-table-container > .ant-table-body {
              position: relative;
            }
          }
        }
      }
    }
  }

  .ant-pagination-options {
    .ant-select {
      width: 100px;
    }
  }
  .ant-table-cell:not(.normal-break) {
    word-break: break-all;
  }
}
.p-error-group-tab {
  position: relative;
  overflow: visible;
  color: var(--p-danger-color, #f5222d) !important;
  &:after {
    content: '🏷️';
    position: absolute;
    top: -1em;
    right: 0;
    width: 1em;
    height: 1em;
    font-size: 0.8em;
    animation: heartbeat 2s infinite;
  }
}
.ant-picker-dropdown {
  .ant-picker-footer {
    padding-left: 4px;
  }
}
.p-error-hang-out {
  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
      .ant-input-affix-wrapper-borderless
    ).ant-input-affix-wrapper {
    border-color: var(--p-border-color, #d9d9d9) !important;

    &:focus {
      border-color: var(--p-primary-color, #4096ff) !important;
    }
  }
  .ant-form-item-explain-error {
    display: none;
  }
}

.no-error-border {
  border-color: var(--p-border-color, #d9d9d9) !important;

  &:focus {
    border-color: var(--p-primary-color, #4096ff) !important;
  }
}
@media (max-width: 575px) {
  .p-wrapper .ant-form .ant-form-item .ant-form-item-label {
    justify-content: flex-start;
  }
}

.collapsible-card {
  background-color: var(--p-bg-color, #fff);
  border-color: var(--p-border-light-color, #f0f0f0);
  .ant-collapse-header {
    padding: 0 12px;
    min-height: 38px;
    display: flex;
    align-items: center;
    font-weight: 600;
    /* 业务侧可用 --collapsible-card-header-bg 覆盖为 --amp-bg-secondary 等 */
    background-color: var(--collapsible-card-header-bg, transparent);
    .ant-collapse-expand-icon {
      padding-inline-end: 8px;
    }
  }
  .ant-collapse-content {
    border-color: var(--p-border-light-color, #f0f0f0);
    .ant-collapse-content-box {
      padding: var(--collapsible-card-body-padding, 12px);
    }
  }
  .ant-collapse-item {
    border-color: var(--p-border-light-color, #f0f0f0);
  }
  .collapsible-card__expand-icon {
    transition: transform 0.2s;
  }
}
/* #endregion */

@each $align in right center {
  /**/
  .p-content-align-#{$align}.ant-form-item .ant-form-item-control-input-content {
    display: flex;
    @if $align == right {
      justify-content: flex-end;
    } @else {
      justify-content: center;
    }
    align-items: center;
    text-align: #{$align};
  }
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  6% {
    transform: scale(1.22);
  }
  12% {
    transform: scale(1);
  }
  18% {
    transform: scale(1.18);
  }
  24% {
    transform: scale(1);
  }
  48% {
    transform: scale(1);
  } // 长停顿
  54% {
    transform: scale(1.22);
  }
  60% {
    transform: scale(1);
  }
  66% {
    transform: scale(1.18);
  }
  72% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  } // 长停顿
}