@historyDetail-container-radius: 6px;
@time-line-color: #979797;
@custom-dot-width: 33px;
@custom-dot-height: 33px;
@custom-dot-tag-size: 16px;
@white-1: #ffffff;
@blank: #fff;
@font-size-text: 14px;
@font-size-small: 12px;
@font-color-text: rgba(0, 0, 0, 0.7);
@black-alpha-50: rgba(0, 0, 0, 0.5);

// 历史明细 主容器
.historyDetail-container {
  background: @white-1;
  border-radius: @historyDetail-container-radius;
  min-height: 75vh;

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 12px;
  }

  .mini-tabs {
    display: flex;
    align-items: center;
    font-size: 14px;

    & > span[role='button'] {
      display: flex;
      align-items: center;
    }
  }

  .flowchart-button {
    display: flex;
    align-items: center;
    gap: 0 6px;

    & > span:nth-of-type(1) {
      font-size: @font-size-text;
    }

    & > span:nth-of-type(2) {
      font-size: 24px !important;
    }
  }

  :global {
    .adm-swiper-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .adm-swiper-track {
      padding: 0 0 0 12px;
    }

    .ant-empty-normal {
      margin: 0;
    }

    .adm-button-loading-wrapper {
      flex-direction: row-reverse;
    }
  }
}

.summary {
  width: 100%;
  height: 95px;

  .summary-title {
    font-size: @font-size-small;
  }

  .summary-content {
    display: inline-flex;
    column-gap: 8px;
    margin-top: 10px;
  }

  .tag {
    width: 60px;
    padding: 4px;
    font-size: @font-size-small;
    border-radius: 4px;
    font-weight: bold;
    margin: auto;
  }
}

// 时间轴
// 流转历史和修改历史通用部分
.timeLine-container {
  width: 100%;
  padding: 0 12px 12px;

  .custom-dot {
    position: relative;
    width: @custom-dot-width;
    height: @custom-dot-width;
    position: relative;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDx0aXRsZT7mpK3lnIblvaI8L3RpdGxlPg0KICAgIDxkZWZzPg0KICAgICAgICA8cmVjdCBpZD0icGF0aC0xIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI2Ij48L3JlY3Q+DQogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iNjQuNjg2Mjk2MSUiIHkxPSIzLjgxODA2OTI1JSIgeDI9Ijc4LjYzNzA5JSIgeTI9IjU5LjY0MzU2OTMlIiBpZD0ibGluZWFyR3JhZGllbnQtMyI+DQogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZGRkZGIiBvZmZzZXQ9IjAlIj48L3N0b3A+DQogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZGRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMTAwJSI+PC9zdG9wPg0KICAgICAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDwvZGVmcz4NCiAgICA8ZyBpZD0i5paw54mIdWkiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0i6YCJ5oup6IGU57O75Lq65LqM57qnwrfpgInkuK3mlYjmnpwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00Ni4wMDAwMDAsIC0yNDAuMDAwMDAwKSI+DQogICAgICAgICAgICA8ZyBpZD0i57yW57uELTPlpIfku70tNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQuMDAwMDAwLCAyMzcuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC005aSH5Lu9LTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyLjAwMDAwMCwgMC4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IuakreWchuW9oiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDMuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4NCiAgICAgICAgICAgICAgICAgICAgICAgIDwvbWFzaz4NCiAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgaWQ9IuiSmeeJiCIgZmlsbD0iIzQxODNGRiIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjkuNSw2MiBDNDMuNTgzMjYxMSw2MiA1NSw1MC41ODMyNjExIDU1LDM2LjUgQzU1LDIyLjQxNjczODkgNDUuMTc4MDQwNywxMC44MDcxNzA3IDMxLjA5NDc3OTYsMTAuODA3MTcwNyBDMjUuMDc5NDE2LDEwLjgwNzE3MDcgMTguNjkyODMyMywxMi42NzAxNzc1IDEzLjk0MTU1NTgsMTYuMzc3NzYxIEM3LjU2OTA3MTM0LDIxLjM1MDQyODUgMy43MjU1MjQ4MSwyOS4zMDk2MDYxIDMuNzI1NTI0ODEsMzcuMzc3NTAzNiBDMy43MjU1MjQ4MSw1MS40NjA3NjQ3IDE1LjQxNjczODksNjIgMjkuNSw2MiBaIiBmaWxsPSIjRkZGRkZGIiBvcGFjaXR5PSIwLjEwMDAwMDAwMSIgbWFzaz0idXJsKCNtYXNrLTIpIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMzguNSwyOCBDNDkuODIxODM3NCwyOCA1OSwxOC44MjE4Mzc0IDU5LDcuNSBDNTksLTMuODIxODM3MzcgNDkuODIxODM3NCwtMTMgMzguNSwtMTMgQzMwLjE5NzQ4MDUsLTEzIDIzLjY2MDcxOSwtNy44Mzk3Mzk1NyAxOSwtMS4zNzkzNTI2NSBDMTcuNTU2Mjg1MywwLjYyMTgzMTE0IDE1LjYwOTMzNzYsMi45MjkxNTg2NSAxNiw3IEMxNi4zNzc3NzIsMTAuOTM2NTE4NCAyNi4yNDc1OTYyLDguNjE0MjMzNzUgMjguMTg1OTAzMSwxMS43NDUxNzY1IEMzMS43OTkxMzMyLDE3LjU4MTYxOSAzMS4xMzExNTcyLDI4IDM4LjUsMjggWiIgaWQ9IuakreWchuW9ouWkh+S7vS0zIiBmaWxsPSIjNTFGOEZGIiBvcGFjaXR5PSIwLjIwOTk5OTk5MyIgbWFzaz0idXJsKCNtYXNrLTIpIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNLTQuNSw0OCBDNi44MjE4MzczNyw0OCA0LjU0NTA4NTM2LDQzLjMyMTgzNzQgNC41NDUwODUzNiwzMiBDNC41NDUwODUzNiwzMC4xOTcwMzE4IDUuODU2NTM3MDgsMjYuMTY3MzIxOCA3LjkwOTUzOTAzLDIzLjEyODkxMDEgQzEwLjIxMjA1MTMsMTkuNzIxMjI2OCAxMy4yNzc1ODk2LDE3LjM2ODkwNDggMTMuMTI4NDQ2OSwxNy4wMzAxMzQ0IEMxMC4zNzU2MDIzLDEwLjc3NzE4MjUgMi45OTY3NzgzOSw3IC00LjUsNyBDLTE1LjgyMTgzNzQsNyAtMjUsMTYuMTc4MTYyNiAtMjUsMjcuNSBDLTI1LDM4LjgyMTgzNzQgLTE1LjgyMTgzNzQsNDggLTQuNSw0OCBaIiBpZD0i5qSt5ZyG5b2i5aSH5Lu9IiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTMpIiBvcGFjaXR5PSIwLjIwMDAwMDAwMyIgbWFzaz0idXJsKCNtYXNrLTIpIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSLmpK3lnIblvaLlpIfku70tMiIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iMC4xMDAwMDAwMDEiIG1hc2s9InVybCgjbWFzay0yKSIgY3g9IjIzLjUiIGN5PSIzOS41IiByPSIyMC41Ij48L2NpcmNsZT4NCiAgICAgICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==')
      center no-repeat;
    background-size: contain;

    & > span {
      position: absolute;
      top: 50%;
      color: @blank;
      font-weight: bold;
      transform: translate(-50%, -50%);
    }

    .icon-container {
      position: absolute;
      bottom: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: @custom-dot-tag-size;
      height: @custom-dot-tag-size;
      border-radius: 50%;
      background: @blank;
      transform: translate(50%, 0%);
    }
  }

  .ant-timeline-item {
    padding-bottom: 12px;
  }

  .ant-timeline-item-last {
    padding-bottom: 0;
  }

  .ant-timeline-item-last > .ant-timeline-item-content {
    min-height: 32px;
  }

  .ant-timeline-item-tail {
    left: @custom-dot-width / 2;
  }

  .ant-timeline-item-head-custom {
    left: @custom-dot-width / 2;
  }

  .ant-timeline-item-content {
    top: 4px - (@custom-dot-width / 2);
    height: 100%;
    margin-left: @custom-dot-width + 12px;
  }

  .ant-timeline-item-tail {
    width: 1px;
    border-left: none;
    background-image: linear-gradient(to top, @time-line-color 0%, @time-line-color 50%, transparent 50%);
    background-size: 2px 10px;
  }
}

.flowHistory-timeLine-content-row-1 {
  .userName {
    font-weight: bold;
  }

  .chatBubble-container {
    display: flex;
    align-items: center;
    gap: 0 6px;

    :global {
      img {
        width: 18px;
        height: 18px;
      }

      .ant-badge-multiple-words {
        padding: 0 2px;
      }
    }
  }
}

.flowHistory-timeLine-content-row-2 {
  margin: 4px 0;
  font-size: @font-size-small;

  .orgName {
    font-weight: bold;
  }

  .dept {
    color: @black-alpha-50;
    margin-right: 6px;
  }

  .actionName {
    padding: 1px 5px;
    color: #1e9ae2;
    background: rgba(65, 131, 255, 0.08);
    border-radius: 4px;
  }

  .date {
    color: @black-alpha-50;
  }
}

.flowHistory-timeLine-content-row-3 {
  font-size: @font-size-small;

  .remark-container {
    padding: 10px 12px;
    background: #f7f7f7;
    border-radius: 6px;

    :global {
      .adm-ellipsis a {
        white-space: nowrap;
        color: #4183ff;
        font-weight: bold;
      }

      .ant-col {
        min-height: unset;
      }
    }
  }

  .extra-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    & > div {
      display: flex;
      align-items: center;
      gap: 0 2px;
      color: #4183ff;
      font-weight: bold;
    }
  }
}

// 获取后续审批节点信息 按钮
.nextButton {
  width: 100%;
  height: 44px;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  color: #4183ff;
  line-height: 17px;
}