.blockish-progress-bar {
	.blockish-progress-bar__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		column-gap: 12px;
		margin-bottom: 10px;
	}

	.blockish-progress-bar__title,
	.blockish-progress-bar__percentage {
		margin: 0;
	}

	.blockish-progress-bar__percentage {
		font-weight: 600;
	}

	.blockish-progress-bar__track {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 25px;
		border-radius: 999px;
		background: #e5e7eb;
	}

	.blockish-progress-bar__fill {
		display: flex;
		align-items: center;
		height: 100%;
		min-width: 0;
		overflow: hidden;
		background: #2563eb;
		transition-property: width;
		transition-duration: 0.3s;
		transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
		will-change: width;
	}

	.blockish-progress-bar__fill-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		max-width: 100%;
		min-width: 0;
		padding-inline: 15px;
		box-sizing: border-box;
		width: 100%;
	}

	.blockish-progress-bar__inner-text {
		min-width: 0;
		flex: 0 1 auto;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #ffffff;
		font-size: 11px;
		line-height: 1;
	}

	.blockish-progress-bar__percentage {
		flex-shrink: 0;
		white-space: nowrap;
		color: #ffffff;
		font-size: 11px;
		line-height: 1;
	}
}

.blockish-style-section-title {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	opacity: 0.75;
}