.wv-vprogress {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  height: 100%;
}

/* Progress container */
.wv-vprogress-container {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

/* Progress bar background - vertical orientation */
.wv-vprogress-bar {
  --wv-progress-bar-radius: 0;
  --wv-progress-bar-bg-rgb: var(--wv-color-light-rgb);
  --wv-progress-inner-bg-rgb: var(--wv-rgb-theme, var(--wv-theme-primary-rgb));
  flex: 1;
  background: rgba(var(--wv-progress-bar-bg-rgb), 1);
  overflow: hidden;
  position: relative;
  border-radius: var(--wv-progress-bar-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: visible;
}

/* Progress inner filled part - vertical orientation */
.wv-vprogress-inner {
  --wv-progress-inner-radius: 0;
  background: rgba(var(--wv-progress-inner-bg-rgb), 1);
  transition-property: height;
  transition-timing-function: ease;
  position: absolute;
  border-radius: var(--wv-progress-inner-radius, inherit);
}

/* Direction specific styles */
.wv-vprogress-inner.tb {
  transform-origin: center top;
  bottom: auto;
  top: 0;
}

.wv-vprogress-inner.bt {
  transform-origin: center bottom;
  top: auto;
  bottom: 0;
}

/* No border radius at the end */
.wv-vprogress-inner.tb.no-end-radius {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.wv-vprogress-inner.bt.no-end-radius {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Progress text styles */
.wv-vprogress-text {
  font-size: 24rpx;
  padding: 10rpx 0;
  white-space: nowrap;
  display: block;
}

/* Bar positions */
.wv-vprogress-text.bar-top {
  position: absolute;
  top: 5rpx;
  left: 50%;
  transform: translateX(-50%);
}

.wv-vprogress-text.bar-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wv-vprogress-text.bar-bottom {
  position: absolute;
  bottom: 5rpx;
  left: 50%;
  transform: translateX(-50%);
}

/* Inner positions */
.wv-vprogress-text.inner-top {
  position: absolute;
  top: 5rpx;
  left: 50%;
  transform: translateX(-50%);
	color: rgba(var(--wv-rgb-content-theme, var(--wv-color-light-rgb)));
}

.wv-vprogress-text.inner-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	color: rgba(var(--wv-rgb-content-theme, var(--wv-color-light-rgb)));
}

.wv-vprogress-text.inner-bottom {
  position: absolute;
  bottom: 5rpx;
  left: 50%;
  transform: translateX(-50%);
	color: rgba(var(--wv-rgb-content-theme, var(--wv-color-light-rgb)));
}

/* Side positions - handled by flex container */
.wv-vprogress-text.side-top, .wv-vprogress-text.side-bottom {
  /* No specific styling needed, flex container handles it */
}

/* Left positions */
.wv-vprogress-text.left-top {
  align-self: flex-start;
}

.wv-vprogress-text.left-center {
  align-self: center;
}

.wv-vprogress-text.left-bottom {
  align-self: flex-end;
}

/* Right positions */
.wv-vprogress-text.right-top {
  align-self: flex-start;
}

.wv-vprogress-text.right-center {
  align-self: center;
}

.wv-vprogress-text.right-bottom {
  align-self: flex-end;
}

/* Icon slots positioning */
.wv-vprogress-icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--wv-content-color-fit-theme, var(--wv-content-color-fit-primary-rgb)));
}

/* Start icon positioning */
.wv-vprogress-icon.start-icon.tb {
  top: 5rpx;
}

.wv-vprogress-icon.start-icon.bt {
  bottom: 5rpx;
}

/* End icon positioning */
.wv-vprogress-icon.end-icon.tb {
  bottom: 5rpx;
}

.wv-vprogress-icon.end-icon.bt {
  top: 5rpx;
}

/* Striped effect for progress bar */
.wv-vprogress-striped {
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40rpx 40rpx;
}

/* 3D effect styles */
.wv-vprogress.dimension .wv-vprogress-bar {
    box-shadow: 1px -2px 2px #ded3cb inset, -1px 0 0 #fff;
}

.wv-vprogress.dimension .wv-vprogress-inner {
  background-image: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.3) 30%,
    rgba(0, 0, 0, 0.12) 100%
  );
}