@root-entry-name: 'default';
@import (reference) '~antd/es/style/themes/index.less';

.pro-collapse {
  background: #f6f8fc;

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

  &.@{ant-prefix}-collapse {
    .pro-collapse-panel {
      margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
    }
  }

  .@{ant-prefix}-collapse-header {
    align-items: center !important;
    padding: 12px var(--zaui-space-size-md, 16px) !important;
    background: var(--zaui-area, #fafafa);
  }

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

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

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

  .@{ant-prefix}-collapse-content-box {
    padding: 0;
    background: var(--zaui-base-bg, #ffffff);

    .pro-collapse-content {
      padding: var(--zaui-space-size-md, 16px);
      padding-bottom: 0;
      background: var(--zaui-base-bg, #ffffff);
    }
  }

  &.pro-collapse-level2 {
    margin-bottom: 0;
    background: var(--zaui-base-bg, #ffffff);

    .@{ant-prefix}-collapse-header {
      margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
      padding: 0 !important;
      background: var(--zaui-base-bg, #ffffff);

      .@{ant-prefix}-collapse-header-text {
        position: relative;
        padding-left: var(--zaui-space-size-sm, 8px);
        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, 2px);
          transform: translateY(-50%);
          content: '';
        }
      }

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

    .pro-collapse-level2-collapse {
      .@{ant-prefix}-collapse-extra {
        .extra-info {
          margin-right: var(--zaui-space-size-lg, 32px);
        }
      }
    }

    .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;
      }
    }
  }

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

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

      &.@{ant-prefix}-descriptions-item {
        padding-left: var(--zaui-space-size-md, 16px);
      }
    }

    .@{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, 2px);
          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);
      }
    }

    .@{ant-prefix}-descriptions {
      margin-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
    }
  }
}