@import "@wordpress/base-styles/breakpoints";

$blueberry-color: #3858e9;

.is-group-performance-profiler:not(.is-focus-content) {
	background: linear-gradient(180deg, var(--studio-gray-100) 25.44%, rgba(16, 21, 23, 0) 100%), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjEiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPC9zdmc+Cg==) repeat, var(--studio-gray-100);
}

.is-group-performance-profiler .layout__content {
	padding: 0;
	background: #fff;

	.main {
		padding: 0;
	}

	.lpc-footer-nav-container a,
	.lpc-footer-automattic-nav a {
		text-decoration: none;
	}
}

.performance-profiler-content {
	.top-section {
		display: flex;
		margin-right: auto;
		width: 100%;
		flex-wrap: wrap;
		column-gap: 20px;
		align-items: center;
		justify-content: center;
	}
}

.peformance-profiler-dashboard-container {
	a {
		color: $blueberry-color;

		&:hover {
			color: darken($blueberry-color, 10%);
			text-decoration: underline;
		}

		&.is-primary {
			color: #fff;
			background-color: $blueberry-color;
			border-radius: 4px;

			&:hover:not(:disabled) {
				background-color: darken($blueberry-color, 10%);
			}
		}
	}

	.l-block-wrapper {
		margin: 0 auto;
		max-width: 1056px;
	}

	.loading-container {
		display: none;

		&.is-active.is-loading {
			display: block;
		}
	}
}
