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

.pro-collapse {
  .pro-collapse-icon {
    max-width: 18px;
    min-width: 16px;
    img {
      vertical-align: sub;
    }
  }

  &.pro-collapse-no-title {
    & > .pro-collapse-panel {
      & > .@{ant-prefix}-collapse-header {
        display: none !important;
      }
    }

    .pro-collapse-level2 {
      .@{ant-prefix}-collapse-header {
        display: flex !important;
      }
    }
  }

  &.@{ant-prefix}-collapse {
    .pro-collapse-panel {
      margin-bottom: 16px;
    }
  }

  .@{ant-prefix}-collapse-header {
    align-items: center !important;
    padding: 10px var(--zaui-space-size-md, 16px) !important;
    background: #e4f2fe;
    border-radius: 8px !important;
  }

  .@{ant-prefix}-collapse-title {
    color: var(--zaui-text, #343434);
    font-weight: 500;
    font-size: var(--zaui-font-size-lg, 16px);
  }

  .@{ant-prefix}-collapse-expand-icon {
    color: #999;
  }

  &.@{ant-prefix}-collapse-borderless
    .@{ant-prefix}-collapse-item
    > .@{ant-prefix}-collapse-content
    > .@{ant-prefix}-collapse-body {
    padding: 0;
  }

  .@{ant-prefix}-collapse-body {
    padding: 0 !important;

    .pro-collapse-content {
      padding: var(--zaui-space-size-md, 16px);
      padding-top: var(--zaui-space-size-sm, 8px);
      padding-bottom: 0;
      background: var(--zaui-base-bg, #ffffff);
      border: 1px solid #ebecee;
    }
  }

  &.pro-collapse-level2 {
    background: var(--zaui-base-bg, #ffffff);
    .pro-collapse-panel {
      margin-bottom: 0;
    }
    .@{ant-prefix}-collapse-header {
      padding: 0 !important;
      background: var(--zaui-base-bg, #ffffff);

      .@{ant-prefix}-collapse-title {
        position: relative;
        padding-left: 15px;
        font-size: var(--zaui-font-size, 14px);

        &::before {
          position: absolute;
          top: 50%;
          left: 0;
          width: 4px;
          height: 14px;
          background: var(--zaui-brand);
          border-radius: var(--zaui-border-radius-card, 4px);
          transform: translateY(-50%);
          content: '';
        }
      }

      .@{ant-prefix}-collapse-extra {
        .extra-info {
          margin-right: var(--zaui-space-size-sm, 8px);
        }
      }
    }

    .pro-collapse-content {
      padding: var(--zaui-space-size-md, 16px) !important;
      border: none !important;
    }

    .pro-collapse-level2-collapse {
      margin-bottom: var(--zaui-space-size-md, 16px);
      &.@{ant-prefix}-collapse-item-active {
        margin-bottom: 0;
      }
      .@{ant-prefix}-collapse-header {
        padding: 0 8px 6px !important;
        border-bottom: 1px solid #dee0e3;
        margin: 0 -8px;
        border-radius: 0 !important;
        .@{ant-prefix}-collapse-arrow {
          right: 8px;
        }
      }

      .@{ant-prefix}-collapse-extra {
        .extra-info {
          margin-right: 4px;
        }
      }
    }

    .pro-collapse-content {
      padding: 0;
    }

    &.@{ant-prefix}-collapse .@{ant-prefix}-collapse-item-disabled > .@{ant-prefix}-collapse-header,
    .@{ant-prefix}-collapse
      .@{ant-prefix}-collapse-item-disabled
      > .@{ant-prefix}-collapse-header
      > .arrow {
      color: var(--zaui-text, #343434);
      cursor: default;
    }

    .@{ant-prefix}-collapse-expand-icon {
      display: none;
    }

    .pro-collapse-level2-collapse {
      .@{ant-prefix}-collapse-expand-icon {
        display: block;
      }
    }

    .pro-collapse-level2-no-collapse {
      .@{ant-prefix}-collapse-expand-icon {
        display: none;
      }
      .pro-collapse-content {
        padding: var(--zaui-space-size-sm, 8px) 0 !important;
      }
    }
  }

  .@{ant-prefix}-collapse-extra {
    .extra-info {
      margin-right: 24px;
    }
  }

  &.pro-collapse-list {
    .@{ant-prefix}-descriptions-view {
      margin: 0 -8px;
    }
    .@{ant-prefix}-descriptions-row > th,
    .@{ant-prefix}-descriptions-row > td {
      padding: var(--zaui-space-size-sm, 8px) 0;
      background: #fafafa;

      &.@{ant-prefix}-descriptions-item {
        padding-left: 23px;
      }
    }

    .@{ant-prefix}-descriptions-row {
      td:first-child {
        position: relative;

        &::before {
          position: absolute;
          top: 50%;
          left: 8px;
          width: 4px;
          height: 14px;
          background: var(--zaui-brand);
          border-radius: var(--zaui-border-radius-card, 4px);
          transform: translateY(-50%);
          content: '';
        }
      }
    }

    .@{ant-prefix}-descriptions-item-container {
      .@{ant-prefix}-descriptions-item-label,
      .@{ant-prefix}-descriptions-item-content {
        color: #0a0a0a !important;
        font-weight: 500 !important;
        font-size: var(--zaui-font-size, 14px);
      }
    }
  }

  &.pro-collapse-level3 {
    margin-bottom: var(--zaui-space-size-md, 16px);

    .pro-collapse-level2 {
      margin-top: 8px !important;
      .pro-collapse-panel {
        border: none !important;
      }
      .@{ant-prefix}-collapse-header {
        height: auto !important;
        background: #fff !important;
        &:hover {
          background: #fff !important;
        }
        .@{ant-prefix}-collapse-title {
          &:before {
            display: block;
          }
        }

        .@{ant-prefix}-collapse-extra {
          .extra-info {
            font-size: var(--zaui-font-size, 14px);
            color: var(--zaui-text, #343434);
          }
        }
      }
      .@{ant-prefix}-collapse-content {
        .@{ant-prefix}-collapse-body {
          .pro-collapse-content {
            padding: var(--zaui-space-size-sm, 8px) 0 !important;
          }
        }
      }
    }

    .@{ant-prefix}-collapse-item-active {
      margin-bottom: 0 !important;
    }
    .pro-collapse-panel {
      border: 1px solid #d9d9d9;
      margin-bottom: var(--zaui-space-size-md, 16px);
      overflow: hidden;
      border-radius: 8px !important;

      &:last-child {
        margin-bottom: 0;
        border-bottom: 1px solid #d9d9d9;
      }
    }

    .pro-collapse-level3-no-collapse {
      .@{ant-prefix}-collapse-header {
        padding: 0 !important;
      }
    }

    .@{ant-prefix}-collapse-header {
      height: 48px !important;
      padding: 0 var(--zaui-space-size-md, 16px) !important;
      background: #f8f8f8 !important;
      border-radius: 8px;
      align-items: center !important;
      justify-content: center !important;
      display: flex !important;
      margin: 0 !important;
      border-bottom: none !important;

      .@{ant-prefix}-collapse-title {
        font-size: var(--zaui-font-size, 14px);
        font-weight: 500;
        color: var(--zaui-text, #343434);
        padding-left: 16px !important;
        &:before {
          display: none;
        }
      }

      .@{ant-prefix}-collapse-extra {
        .extra-info {
          font-size: var(--zaui-font-size, 14px);
          color: var(--zaui-text, #343434);
        }
      }
    }

    .@{ant-prefix}-collapse-content {
      .@{ant-prefix}-collapse-body {
        .pro-collapse-content {
          padding: var(--zaui-space-size-md, 16px) !important;
          background: var(--zaui-base-bg, #ffffff);
        }
      }
    }

    // 可折叠样式
    .pro-collapse-level3-collapse {
      .@{ant-prefix}-collapse-expand-icon {
        display: block !important;
        color: #999;
        margin-right: 8px;
      }

      .@{ant-prefix}-collapse-header {
        cursor: pointer;
        padding: 0 !important;
        &:hover {
          background: #f0f0f0;
        }
      }
    }

    // 不可折叠样式
    .pro-collapse-level3-no-collapse {
      .@{ant-prefix}-collapse-expand-icon {
        display: none !important;
      }

      .@{ant-prefix}-collapse-header {
        cursor: default;
      }
    }

    // 禁用折叠时的样式
    &.@{ant-prefix}-collapse .@{ant-prefix}-collapse-item-disabled > .@{ant-prefix}-collapse-header,
    .@{ant-prefix}-collapse
      .@{ant-prefix}-collapse-item-disabled
      > .@{ant-prefix}-collapse-header
      > .arrow {
      color: var(--zaui-text, #343434);
      cursor: default;
      background: #f8f8f8 !important;
    }
  }
  // 当pro-collapse-content直接包含level3且不包含level2时，添加padding
  .pro-collapse-level2 .pro-collapse-content:has(.pro-collapse-level3) {
    padding: var(--zaui-space-size-md, 16px) !important;
    padding-right: 0 !important;
  }
  // 修复maxTagCount时"+ N..."区域的hover问题. 解决antd多选Select的input元素遮挡"+ N..."区域导致无法触发hover事件的问题
  .@{ant-prefix}-select-selection-overflow-item-rest {
    position: relative;
    z-index: 2;
    pointer-events: auto;
  }
}