Propz Twitch Goal Style

:root {
	--color-primary: #1f1f23;
	--color-light: #fff;
	--font-family: "Titillium Web";
	--gradient: linear-gradient(
		90deg,
		#ffdb49 0%,
		#ffbeba 20%,
		#fef2e0 40%,
		#c7c7f1 60%,
		#5ac8fa 80%,
		#71ff8c 100%
	);
}
.goal_widget_overlay {
	.goal_widget_v2__container {
		min-width: unset !important;

		.tw-root--theme-light {
			--color-text-base: var(--color-light) !important;
			--color-background-base: var(--color-primary) !important;
			--border-radius-large: 1rem !important;
			border: .2rem solid var(--color-primary) !important;
			overflow: hidden;

			.goal_widget_v2__container {
				--font-size-base: 180% !important;
				--font-weight-semibold: 700;

				min-height: unset !important;
				font-family: var(--font-family) !important;
				flex-direction: initial !important;
				border: 0 !important;
				text-transform: uppercase !important;

				/* Text + image wrapper */
				& > div:first-child {
					width: 100%;

					/* Title wrapper (img + goal title) */
					& > div:first-child {
						display: none !important;
					}

					/* Goal Number + Goal text wrapper */
					& > div:last-child {
						width: 100%;
						position: relative;
						z-index: 1;
						mix-blend-mode: difference;
						flex-direction: initial !important;
						align-items: center !important;
						justify-content: center;
						gap: 1rem;
					}
				}

				/* Progress bar base bg color */
				div[role="progressbar"] {
					background: var(--color-primary);
					position: absolute !important;
					inset: 0;
					height: 100% !important;
					border-radius: 0 !important;
					z-index: 0;

					/* progress bar dots */
					& > div:not(:last-child) {
						display: none;
					}

					/* Progress bar current bg color */
					& > div:last-child {
						--color-accent: var(--gradient);
						--background-color-progress: var(--gradient);
					}
				}
			}
		}
	}
}