Mini Shell

.backup-storage-space__progress-bar {
	height: 24px;
	line-height: 0;
	margin-top: 24px;
	margin-bottom: 16px;

	.progress-bar {
		height: 100%;
		border-radius: 12px; /* stylelint-disable-line scales/radii */
		background-color: var(--jp-gray-5);

		.progress-bar__progress {
			// Unless we're 100% full, the left side of the bar
			// is rounded and the right side is flat
			/* stylelint-disable-next-line scales/radii */
			border-radius: 12px 0 0 12px;

			// We always expect some amount of used storage,
			// so keep a border-radius sized buffer so
			// the left side of the bar looks correctly rounded
			min-width: 12px;

			// Only allow full width if storage is full;
			// otherwise, leave a border-radius sized buffer,
			// so the right side looks okay without a radius
			max-width: calc(100% - 12px);
		}

		&.no-warning {
			.progress-bar__progress {
				background-color: var(--jp-black);;
			}
		}

		&.yellow-warning {
			.progress-bar__progress {
				background-color: var(--jp-yellow-20);
			}
		}

		&.red-warning {
			.progress-bar__progress {
				background-color: var(--jp-red-40);
			}
		}

		// When the bar is full, we can show the filled portion
		// at full width, with a rounded right side
		&.full-warning {
			.progress-bar__progress {
				max-width: initial;
				background-color: var(--jp-red-40);
				border-radius: 12px; /* stylelint-disable-line scales/radii */
			}
		}
	}
}