.performance-profiler-performance-score {
	flex: 1; // This component will grow and shrink instead of the sibling
	display: flex;
	padding: 24px 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	position: relative;
	min-width: 360px;

	.score-summary {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		align-self: stretch;
	}

	.title {
		font-size: $font-title-small;
		line-height: $font-title-medium;
		font-weight: 500;
	}

	.score {
		display: flex;
		align-items: baseline;
		gap: 8px;

		.current-score {
			color: #000;
			font-size: 96px;
			line-height: 96px;
			font-weight: 300; /* stylelint-disable-line scales/font-weights */
		}

		.max-score {
			color: var( --studio-gray-60 );
			font-size: 26px;
			line-height: 26px;
		}

		&.mobile {
			.current-score {
				font-size: 64px;
				line-height: 64px;
			}

			.max-score {
				font-size: $font-title-small;
			}
		}
	}

	.disclaimer {
		color: var( --studio-gray-70 );
		font-size: $font-body-extra-small;
		line-height: $font-title-small;
		text-wrap: balance;
		a {
			text-wrap: nowrap;
		}
	}

	.status {
		font-size: $font-body-small;
		color: #000;
		display: flex;
		align-items: center;
		gap: 12px;
		align-self: stretch;
		flex-wrap: wrap;

		.status-badge {
			display: flex;
			padding: 6px 12px;
			justify-content: center;
			align-items: center;
			gap: 10px;
			border-radius: 20px; /* stylelint-disable-line scales/radii */
			font-weight: 500;
			flex-shrink: 0;

			&.poor {
				background: var( --studio-red-5 );
			}

			&.neutral {
				background: var( --studio-orange-5 );
			}

			&.good {
				background: var( --studio-green-5 );
			}
		}

		.recommendations-text {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			white-space: nowrap;
			a {
				cursor: pointer;
				font-weight: 500;
				white-space: nowrap;
			}
		}
	}

	.score-bar {
		position: relative;

		.full-bar {
			width: 280px;
			height: 4px;
			border-radius: 3px;
			background: #d9d9d9;
			position: absolute;
		}

		.current-value-bar {
			height: 8px;
			border-radius: 8px;
			border: 2px solid #fff;
			position: absolute;
			top: -4px;
			background: var( --studio-orange-40 );

			&.poor {
				background: var( --studio-red-50 );
			}

			&.neutral {
				background: var( --studio-orange-40 );
			}

			&.good {
				background: var( --studio-green-30 );
			}
		}
	}
}
