.ub_progress-bar {
	&:not(.rounded-circle) {
		.ub_progress-bar-container {
			.ub_progress-bar-circle {
				.ub_progress-bar-circle-path {
					stroke-linecap: butt !important;
				}
			}
		}
	}
	&:not(.is-style-ub-progress-bar-circle-wrapper):not(
			.is-style-ub-progress-bar-half-circle-wrapper
		) {
		&.ub_progress-bar-filled {
			.ub_progress-bar-container {
				.ub_progress-bar-line {
					.ub_progress-bar-line-path {
						stroke-dashoffset: var(--ub-progress-bar-filled-dashoffset);
					}
				}
			}
		}
		&.ub-progress-bar-detail-align-center {
			.ub_progress-bar-container {
				.ub_progress-detail-wrapper {
					justify-content: center;
				}
			}
		}
		&.ub-progress-bar-detail-align-right {
			.ub_progress-bar-container {
				.ub_progress-detail-wrapper {
					justify-content: flex-end;
				}
			}
		}
		&.ub-progress-bar-detail-align-left {
			.ub_progress-bar-container {
				.ub_progress-detail-wrapper {
					justify-content: flex-start;
				}
			}
		}
		.ub_progress-bar-container {
			text-align: start;
			.ub_progress-detail-wrapper {
				position: relative;
				display: flex;
				align-items: center;
			}
			&.ub_progress-bar-stripe {
				position: relative;
				.ub_progress-bar-line-stripe {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					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: 8px 8px;
					animation: progressAnimation 10s linear infinite;
				}
			}
			&.ub_progress-bar-label-inside {
				position: relative;
				.ub_progress-bar-label {
					position: absolute;
					top: 50%;
					line-height: 1;
					transform: translate(0%, -50%);
					display: flex;
					justify-content: flex-end;
					align-items: center;
					p {
						height: 3.5em;
						margin: 0;
						line-height: 4em;
					}
				}
			}
			.ub_progress-bar-line {
				.ub_progress-bar-line-trail {
					fill-opacity: 0;
					stroke-linecap: square;
				}
				.ub_progress-bar-line-path {
					stroke-dashoffset: 100px;
					stroke-dasharray: 100px, 100px;
					transition:
						stroke-dashoffset 0.3s ease 0s,
						stroke 0.3s linear 0s;
					fill-opacity: 0;
					stroke-linecap: square;
				}
			}
			.ub_progress-bar-label {
				text-align: right;
				min-width: 24px;
				p {
					margin: 0;
					display: flex;
					justify-content: flex-end;
				}
				&.ub_progress-bar-label-top {
					position: absolute;
					left: 0;
				}
			}
		}
	}
	&.is-style-ub-progress-bar-circle-wrapper,
	&.is-style-ub-progress-bar-half-circle-wrapper {
		&.ub_progress-bar-filled {
			.ub_progress-bar-circle {
				.ub_progress-bar-circle-path {
					stroke-dasharray: var(--ub-progress-bar-filled-dasharray);
				}
			}
		}
		.ub_progress-bar-label {
			position: relative;
			top: 50%;
			transform: translateY(-50%);
			margin: auto;
			text-align: center !important;
			display: flex;
			justify-content: center;
		}
		.ub_progress-bar-circle {
			position: absolute;

			.ub_progress-bar-circle-trail {
				stroke-dashoffset: 0px;
				transition:
					stroke-dashoffset 0.3s ease 0s,
					stroke-dasharray 0.3s ease 0s,
					stroke 0.3s ease 0s;
				fill-opacity: 0;
			}
			.ub_progress-bar-circle-path {
				stroke-dashoffset: 0px;
				stroke-dasharray: var(--ub-progress-bar-dasharray);
				transition:
					stroke-dashoffset 0.3s ease 0s,
					stroke-dasharray 0.3s ease 0s,
					stroke 0.3s ease 0s,
					stroke-width 0.06s ease 0.3s;
				fill-opacity: 0;
			}
		}
	}
	&.ub-progress-bar-detail-align-center {
		.ub_progress-bar-text {
			text-align: center;
		}
	}
	&.ub-progress-bar-detail-align-right {
		.ub_progress-bar-text {
			text-align: right;
		}
	}
	&.ub-progress-bar-detail-align-left {
		.ub_progress-bar-text {
			text-align: left;
		}
	}
	.ub_progress-bar-text {
		z-index: 1;
		p {
			margin: 0;
		}
	}
}
@keyframes progressAnimation {
	to {
		background-position: 100% 0;
	}
}