/*
 * [mm_floo_list] and [mm_floo_traffic]. Fonts and colours come from the
 * theme: the chart uses the text colour unless the shortcode sets one
 * (--mmdb-floo-color). This file only handles layout, the line and the tips.
 */

.mmdb-floo-list__owner {
	opacity: 0.7;
}

/* [mm_floo_list]: "Official Fireplaces" and "Player Fireplaces", one after the other. */
.mmdb-floo-group + .mmdb-floo-group {
	margin-top: 1.5em;
}

/* Line chart: an SVG stretched to the plot for the line and area, with the
   points and their tips as HTML on top, so they stay round and readable at
   any width. */
.mmdb-floo-trend {
	--mmdb-floo-color: currentColor;
	margin: 0 0 1.5em;
	padding: 2.5em 0 0;
}

.mmdb-floo-trend__caption {
	font-weight: 600;
	margin-bottom: 0.5em;
}

.mmdb-floo-trend__plot {
	position: relative;
	height: 200px;
	border-bottom: 1px solid;
	border-color: rgba(128, 128, 128, 0.4);
}

.mmdb-floo-trend__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.mmdb-floo-trend__area {
	fill: var(--mmdb-floo-color);
	fill-opacity: 0.15;
	stroke: none;
}

.mmdb-floo-trend__line {
	fill: none;
	stroke: var(--mmdb-floo-color);
	stroke-width: 2.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mmdb-floo-trend__point {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--mmdb-floo-color);
	box-shadow: 0 0 0 2px #fff;
	cursor: default;
	outline: none;
}

/* A larger, invisible target than the dot itself, for mouse and touch. */
.mmdb-floo-trend__point::before {
	content: "";
	position: absolute;
	top: -12px;
	right: -12px;
	bottom: -12px;
	left: -12px;
	border-radius: 50%;
}

.mmdb-floo-trend__point:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mmdb-floo-color);
}

.mmdb-floo-trend__tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	z-index: 2;
	padding: 4px 8px;
	border-radius: 4px;
	background: #1d2327;
	color: #fff;
	font-size: 0.85em;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.mmdb-floo-trend__tip strong {
	color: inherit;
}

/* The first and last tips open inwards, so they aren't cut off at the edges. */
.mmdb-floo-trend__point--first .mmdb-floo-trend__tip {
	left: -6px;
	transform: translate(0, 4px);
}

.mmdb-floo-trend__point--last .mmdb-floo-trend__tip {
	right: -6px;
	left: auto;
	transform: translate(0, 4px);
}

.mmdb-floo-trend__point:hover .mmdb-floo-trend__tip,
.mmdb-floo-trend__point:focus .mmdb-floo-trend__tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

.mmdb-floo-trend__point--first:hover .mmdb-floo-trend__tip,
.mmdb-floo-trend__point--first:focus .mmdb-floo-trend__tip,
.mmdb-floo-trend__point--last:hover .mmdb-floo-trend__tip,
.mmdb-floo-trend__point--last:focus .mmdb-floo-trend__tip {
	transform: translate(0, 0);
}

/* Date labels, one per column, centred under their points. */
.mmdb-floo-trend__dates {
	display: flex;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.mmdb-floo-trend__dates li {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: 0.85em;
	text-align: center;
	opacity: 0.75;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
	.mmdb-floo-trend__tip {
		transition: none;
	}
}