.mariadb-download-stats-note {
	margin-block: 0 1.5rem;
}

.mariadb-download-stats-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.mariadb-download-stats-tab {
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 999px;
	background: var(--mariadb-card-bg);
	color: var(--wp--preset--color--primary);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.mariadb-download-stats-tab:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.mariadb-download-stats-tab.is-active {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.mariadb-download-stats-panel {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 8px;
	background: var(--mariadb-card-bg);
}

.mariadb-download-stats-status {
	margin-block: 0 1rem;
}

.mariadb-download-stats-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem 1.5rem;
	margin-bottom: 0.75rem;
}

.mariadb-download-stats-toolbar:not(:has(> :not([hidden]))) {
	display: none;
}

.mariadb-download-stats-series {
	display: flex;
	gap: 0.5rem;
}

.mariadb-download-stats-series-btn {
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.mariadb-download-stats-series-btn:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.mariadb-download-stats-log {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	cursor: pointer;
}

.mariadb-download-stats-series[hidden],
.mariadb-download-stats-log[hidden] {
	display: none;
}

.mariadb-download-stats-log input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--wp--preset--color--accent);
}

.mariadb-download-stats-canvas {
	position: relative;
	height: 60vh;
	min-height: 400px;
}

/* Phones: charts with many series get extra height, since their legend sits on top there. */
@media (max-width: 700px) {
	.mariadb-download-stats-canvas.has-many-series {
		height: 80vh;
		min-height: 520px;
	}
}