.pd-images-pc-progress-bar-container {
  position: sticky;
  z-index: 1;
  top: calc(50% - 150px);
  height: 300px;
  margin-top: 80px;
  margin-bottom: 80px;
}
.pd-images-pc-progress-bar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.pd-progress-bar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 160px;
  margin: 30px 0;
  border-radius: 20px;
  background: var(--color-background);
}
.pd-progress-bar-inner {
  width: 8px;
  height: 128px;
  border-radius: 4px;
  background: var(--color-border);
  overflow: hidden;
}
/* 填充高度由组件反射的 CSS 变量驱动 */
.pd-progress-bar-inner-item {
  width: 100%;
  height: var(--i-spzhtml-progress, 0%);
  background: var(--color-icon);
}
.progress-bar-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-variant-background);
  border: 1px solid var(--color-variant-border);
  box-shadow: var(--color-shadow);
  transform: rotate(90deg);
  cursor: pointer;
}
.progress-bar-button .icon-progress-bar-button {
  color: var(--color-variant-icon);
}
html[dir='rtl'] .progress-bar-button .icon-progress-bar-button.icon-progress-bar-button {
  transform: none;
}
/* 禁用态：到顶 = 没有 [scrolled]，到底 = 有 [scrolled-to-end] */
.pd-images-pc-progress-bar:not([scrolled]) .progress-bar-button--prev,
.pd-images-pc-progress-bar[scrolled-to-end] .progress-bar-button--next {
  background: var(--color-disabled-background);
  border-color: var(--color-disabled-border);
  cursor: not-allowed;
}
.pd-images-pc-progress-bar:not([scrolled])
  .progress-bar-button--prev
  .icon-progress-bar-button,
.pd-images-pc-progress-bar[scrolled-to-end]
  .progress-bar-button--next
  .icon-progress-bar-button {
  color: var(--color-disabled-icon);
}
.progress-bar-button:hover {
  background: var(--color-variant-hover-background);
  border: 1px solid var(--color-variant-hover-border);
}
.progress-bar-button:hover .icon-progress-bar-button {
  color: var(--color-variant-hover-icon);
}
.pd-images-pc-progress-bar-container.is-layout-left {
  -webkit-margin-start: -40px;
          margin-inline-start: -40px;
}
.pd-images-pc-progress-bar-container.is-layout-right {
  -webkit-margin-end: -40px;
          margin-inline-end: -40px;
}
.pd-images-pc-progress-bar {
  position: absolute;
}
.is-layout-left .pd-images-pc-progress-bar {
  inset-inline-start: 50px;
}
.is-layout-right .pd-images-pc-progress-bar {
  inset-inline-end: 50px;
}