.wv-progress {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
}

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

/* Progress bar background */
.wv-progress-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;
}

/* Progress inner filled part */
.wv-progress-inner {
    --wv-progress-inner-radius: 0;
	
	/* Removed height: 100% to allow custom height */
	background: rgba(var(--wv-progress-inner-bg-rgb), 1);
	transition-property: width;
	transition-timing-function: ease;
	position: relative;
	transform-origin: left center;
    border-radius: var(--wv-progress-inner-radius, inherit);
}

/* Direction specific styles */
.wv-progress-inner.lr {
	transform-origin: left center;
    margin-right: auto; /* Ensures inner bar stays at the left */
}

.wv-progress-inner.rl {
	transform-origin: right center;
    margin-left: auto; /* Pushes inner bar to the right side */
}

/* No border radius at the end */
.wv-progress-inner.lr.no-end-radius {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.wv-progress-inner.rl.no-end-radius {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

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

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

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

.wv-progress-text.bar-right {
	position: absolute;
	right: 5rpx;
	top: 50%;
	transform: translateY(-50%);
}

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

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

.wv-progress-text.inner-right {
	position: absolute;
	right: 5rpx;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(var(--wv-rgb-content-theme, var(--wv-color-light-rgb)));
}

/* Side positions - handled by flex container */
.wv-progress-text.side-left, .wv-progress-text.side-right {
	/* No specific styling needed, flex container handles it */
}

/* Top positions */
.wv-progress-text.up-left {
	align-self: flex-start;
}

.wv-progress-text.up-center {
	align-self: center;
}

.wv-progress-text.up-right {
	align-self: flex-end;
}

/* Bottom positions */
.wv-progress-text.down-left {
	align-self: flex-start;
}

.wv-progress-text.down-center {
	align-self: center;
}

.wv-progress-text.down-right {
	align-self: flex-end;
}

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

/* Start icon positioning */
.wv-progress-icon.start-icon.lr {
  left: 5rpx;
}

.wv-progress-icon.start-icon.rl {
  right: 5rpx;
}

/* End icon positioning */
.wv-progress-icon.end-icon.lr {
  right: 5rpx;
}

.wv-progress-icon.end-icon.rl {
  left: 5rpx;
}

/* Striped effect for progress bar */
.wv-progress-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-progress.dimension .wv-progress-bar {
	box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
    /* border: 1rpx solid rgba(20, 20, 50, 0.1); */
}

.wv-progress.dimension .wv-progress-inner {
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
}