@use "variables";

// Style everything with border box turned on
#jb-dashboard * {
	box-sizing: border-box;
}

p {
	font-size: 16px;
	color: variables.$gray_80;
}
// Override WordPress component styles
.jb-dashboard {
	--wp-admin-theme-color: #{variables.$jetpack_green_50};
	--wp-admin-theme-link-color: #{variables.$gray_90};
	--wp-admin-theme-color-darker-10: #{variables.$jetpack_green_60};
	--wp-admin-theme-color-darker-20: #{variables.$jetpack_green_70};

	--font-headline-medium: 48px;
	--font-title-medium: 24px;
	--font-body-small: 14px;

	// Jetpack component uses this variable
	--font-body-extra-small: 14px;

	--spacing-base: 8px;

	font-size: 16px;
	min-height: calc(100vh - 60px);
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: #f9f9f6;


	&--main {
		background-color: variables.$primary-white;
	}

	a {
		color: var(--wp-admin-theme-link-color);
	}

	.components-button.is-link:not(:disabled) {
		color: var(--wp-admin-theme-link-color);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		color: variables.$primary-black;
		line-height: 1.3;
		font-weight: 500;
		outline-color: transparent;
		outline-style: none;
	}

	h1 {
		font-size: 36px;
		font-weight: 700;
		line-height: 40px;
	}

	h2 {
		font-size: 36px;
		line-height: 1.1;
	}

	h3 {
		font-size: 24px;
	}

	button.secondary,
	a.button-secondary {
		color: variables.$primary-black;
		background: none;
		border: 1px solid variables.$primary-black;
		padding: 8px 24px;
		border-radius: 3px;
		font-weight: 600;
		cursor: pointer;
		font-size: 16px;
		line-height: 24px;

		&:hover {
			background: variables.$gray_0;
			border-color: variables.$primary-black;
			color: variables.$primary-black;
		}
	}

	// Override WP styles for panel header.
	.components-panel__body-title .components-button:hover:not(:disabled,[aria-disabled="true"]),
	.components-panel__body-title .components-button[aria-expanded="true"] {
		color: inherit;
	}

	.components-panel__body-toggle.components-button:focus {
		border-radius: inherit;
		box-shadow: none;
	}
}

// Reset WP-Admin styles for boost dashboard
.jetpack_page_jetpack-boost #wpcontent {
	padding-left: 0;
	min-height: 100vh;
}
