@use "$css/main/variables";
@use "$css/main/mixins";

.speed-scores {

	p {
		margin: 1em 0;
	}

	.offline,
	.top {
		margin-bottom: 2rem;
	}

	.offline p {
		font-weight: 400;
		max-width: 560px;
		line-height: 1.5;
		color: variables.$gray_70;
	}

	.top {
		display: flex;
		align-items: center;
		color: #000;
	}

	.action-button {
		color: variables.$gray_90;
		margin-left: auto;
		min-width: auto;

		svg {
			fill: variables.$jetpack-green;
		}
	}

	:global(.jb-score-bar__no_boost_score_tooltip) {
		top: -68px;
		font-size: 16px;
	}

	:global(.jb-score-bar__no_boost_score_tooltip::after) {
		font-size: 0.7em;
		left: 50%;
	}
}

:global(.jb-dashboard) .speed-scores h2 {
	font-weight: 700;

	@include mixins.breakpoint(xs) {
		font-size: 27px;
	}
}

@include mixins.breakpoint(xs) {

	.speed-scores :global(.icon-tooltip-helper.is-wide .components-popover) {
		left: -60px !important;
	}

	.speed-scores :global(.icon-tooltip-helper.is-wide .components-popover__content) {
		width: 304px;
	}

	.speed-scores :global(.icon-tooltip-helper.is-wide .components-popover__arrow) {
		left: 215px !important;
	}
}
