@use "../scss/variables/colors";
@use "@automattic/jetpack-base-styles/root-variables";

@mixin emerald-button-colors() {
	background: var(--jp-black);
	border-color: var(--jp-black);
	color: var(--jp-white);
}

@mixin widget-card-background-container() {
	background: var(--jp-white-off);
	padding: 1.5em 1em;
}

@mixin widget-card() {
	background: var(--jp-white);
	border-radius: 5px;
	box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.04);
	padding: 1em 1.5em 1em 1.5em;
}

#jetpack_summary_widget {

	* {
		box-sizing: border-box;
	}

	h2.hndle {

		span {
			display: flex;
			align-items: center;

			span {
				padding: 0 0.4em;
			}
		}

		svg {
			height: 20px;
			margin: 0.15em 0 0 0.5em;
		}
	}

	pre.stats-widget-error {
		overflow: scroll;
	}

	/* Widget settings */
	.js-toggle-stats_dashboard_widget_control .toggle-indicator::before {
		content: "\f111";
		display: inline-block;
		font: 400 20px/1 dashicons;
	}

	.inside {
		margin: 0;
		padding: 0;

		#stats_dashboard_widget_control {
			display: none;
			padding: 0 10px;
			overflow: hidden;

			.button-primary {
				float: right;
			}
		}

		#dashboard_stats {
			box-sizing: border-box;
			width: 100%;
			padding: 0 10px;

			&.is-loading {
				display: none;
			}

			.inside {
				margin: 10px 0 0 0 !important;
			}

			#stats-graph {
				margin: 0;
			}

			/* Widget graph contents */
			#stat-chart {
				background: none !important;
			}

			#stats-info {

				@include widget-card-background-container;
				padding-bottom: 0;
				border-top: 1px solid #dcdcde;
				margin: 7px -10px 0 -10px;
				overflow: hidden;

				div#active {
					border-top: 1px solid #dcdcde;
					margin: 0 -10px;
					padding: 10px 10px 0 10px;
					box-shadow: inset 0 1px 0 #fff;
					overflow: hidden;
				}

				.stats-section-inner > h3.heading {
					font-size: 1.25em;
					margin: 0 0 0.5em 0;
				}

				p {
					margin: 0 0 0.25em;
					color: var(--jp-gray-40);

					&.nothing {
						color: var(--jp-gray-60);
					}

					&.widget-loading {
						margin: 1em 0 0;
						color: #333;
					}

					a {
						color: var(--jp-black);
						display: block;
						text-decoration: none;

						&.button {
							display: inline;
						}

						&:active,
						&:focus,
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}

	#stats-info-container {

		@include widget-card;
		overflow: hidden;

		display: grid;
		row-gap: 1em;
		grid-template-areas:
			"header"
			"content";
		grid-template-rows: min-content min-content;
	}

	.stats-info-content {
		grid-area: content;
		display: grid;
		grid-template-areas: "posts searches";
		grid-template-columns: 1fr 1fr;
		column-gap: 1em;

		.stats-section {
			// Make sure stats section doesn't overflow container so the ellipsis works.
			min-width: 0;
		}
	}

	#stats-info .stats-info-header {
		grid-area: header;
		display: flex;
		justify-content: space-between;

		> h2 {
			font-size: 18px;
			line-height: 30px; // corresponds to .button height.
			padding: 0;
		}

		.stats-info-header-right {
			align-self: center;

			// Use emerald button style.
			.wp-core-ui & .button-primary {

				@include emerald-button-colors();
			}
		}
	}

	#top-posts {
		grid-area: posts;

		.stats-section-inner p {
			white-space: nowrap;
			overflow: hidden;

			a {
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	#top-search {
		grid-area: searches;

		p {
			color: #999;
		}
	}

	.stats,
	.widgets,
	.wpcom-connect {
		padding: 0.75em;
	}

	.wpcom-connect {
		background: var(--jp-gray-0);
		text-align: center;

		.jp-emblem {
			padding: 5px 0 0 0;
		}

		svg {
			width: 40px;
			height: 40px;

			path {
				fill: colors.$green-primary;
			}
		}

		.jp-emblem,
		h3,
		p {
			width: 100%;
		}

		h3 {
			font-size: 1.25em;
			font-weight: 400;
		}

		p {
			color: colors.$wpui_dark_medium_gray;
			margin-top: 0;
			padding: 0 15px;
		}

		.actions {
			text-align: center;
			padding: 15px 0 10px 0;

			small {
				display: block;

				a {
					color: #999;
				}
			}
		}
	}

	footer {
		background: var(--jp-white-off);
		overflow: hidden;

		.blocked-container {

			@include widget-card-background-container();
			display: grid;
			gap: 0 1em;
			grid-template-columns: 1fr 1fr;
		}

		.protect,
		.akismet {

			@include widget-card;
		}

		h3 {
			font-size: 1em;
			font-weight: 400;
			margin: 0 0 0.25em 0;
			padding: 0;
		}

		p.blocked-count {
			margin-top: 0;
			margin-bottom: 6px;
			margin-right: 8px;
			font-weight: 500;
			font-size: 2rem;
			display: inline-block;
			padding: 0 4px;
			min-width: 36px;
			text-align: center;
		}

		p {
			margin: 0;
			padding: 0;
		}

		section {
			margin: 0;
			padding: 0;
			text-align: center;
		}

		.footer-links {
			margin: 0 0 1.5em 1.5em;

			svg {
				height: 20px;
			}

			span {
				float: right;
			}
		}

		.button {

			@include emerald-button-colors();
			margin-top: 8px;
		}
	}
}

/* Hide the widget title's SVG in the Screen Options tab */
.metabox-prefs {

	label[for="jetpack_summary_widget-hide"] {

		span {

			svg {
				height: 1.2rem;
				vertical-align: text-bottom;
			}
		}
	}
}
