.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;
}
.pd-progress-bar-inner-item {
  width: 100%;
  height: 100%;
  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);
}
.progress-bar-button .icon-progress-bar-button {
  color: var(--color-variant-icon);
}
.progress-bar-button.disabled {
  background: var(--color-disabled-background);
  border-color: var(--color-disabled-border);
}
.progress-bar-button.disabled .icon-progress-bar-button {
  color: var(--color-disabled-icon);
}
.progress-bar-button:not(.disabled):hover {
  background: var(--color-variant-hover-background);
  border: 1px solid var(--color-variant-hover-border);
}
.progress-bar-button:not(.disabled):hover .icon-progress-bar-button {
  color: var(--color-variant-hover-icon);
}
.pd-images-pc-progress-bar-container.is-layout-left {
  margin-left: -40px;
}
.pd-images-pc-progress-bar-container.is-layout-right {
  margin-right: -40px;
}
.pd-images-pc-progress-bar {
  position: absolute;
}
.is-layout-left .pd-images-pc-progress-bar {
  left: 50px;
}
.is-layout-right .pd-images-pc-progress-bar {
  right: 50px;
}