.ub_progress-bar {
	padding-top: var(--ub-progress-bar-padding-top, 0px) !important;
	padding-right: var(--ub-progress-bar-padding-right, 0px) !important;
	padding-bottom: var(--ub-progress-bar-padding-bottom, 0px) !important;
	padding-left: var(--ub-progress-bar-padding-left, 0px) !important;
	margin-top: var(--ub-progress-bar-margin-top, auto) !important;
	margin-right: var(--ub-progress-bar-margin-right, auto) !important;
	margin-bottom: var(--ub-progress-bar-margin-bottom, auto) !important;
	margin-left: var(--ub-progress-bar-margin-left, auto) !important;
	&: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-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%;
					font-size: var(--ub-progress-bar-label-font-size);
					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 {
				border-top-left-radius: var(--ub-bar-top-left-radius);
				border-top-right-radius: var(--ub-bar-top-right-radius);
				border-bottom-left-radius: var(--ub-bar-bottom-left-radius);
				border-bottom-right-radius: var(--ub-bar-bottom-right-radius);

				.ub_progress-bar-line-trail {
					fill-opacity: 0;
					stroke-linecap: square;
					border-top-left-radius: var(--ub-bar-top-left-radius);
					border-top-right-radius: var(--ub-bar-top-right-radius);
					border-bottom-left-radius: var(--ub-bar-bottom-left-radius);
					border-bottom-right-radius: var(--ub-bar-bottom-right-radius);
				}
				.ub_progress-bar-line-path {
					stroke-dasharray: 100px, 100px;
					transition:
						stroke-dashoffset 0.3s ease 0s,
						stroke 0.3s linear 0s;
					fill-opacity: 0;
					stroke-linecap: square;
					border-top-left-radius: var(--ub-bar-top-left-radius);
					border-top-right-radius: var(--ub-bar-top-right-radius);
					border-bottom-left-radius: var(--ub-bar-bottom-left-radius);
					border-bottom-right-radius: var(--ub-bar-bottom-right-radius);
				}
			}
			.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-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;
				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-text {
		z-index: 1;
		p {
			margin: 0;
		}
	}
}
@keyframes progressAnimation {
	to {
		background-position: 100% 0;
	}
}
