/**
 * @package     Aidan.Module
 * @subpackage  mod_gacounter
 *
 * @copyright   (C) 2026 Aidan. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Every colour and size is a custom property so a template can retheme the
 * counter from its own stylesheet without overriding a single rule.
 */

.gacounter {
	--gacounter-digit-bg: #1f2937;
	--gacounter-digit-color: #f9fafb;
	--gacounter-digit-border: rgba(255, 255, 255, 0.12);
	--gacounter-digit-radius: 0.25rem;
	--gacounter-digit-size: 1.5rem;
	--gacounter-digit-font-size: 1.25rem;
	--gacounter-digit-gap: 0.1875rem;
	--gacounter-sep-color: currentColor;
	--gacounter-label-color: inherit;
	--gacounter-value-color: inherit;
	--gacounter-row-border: rgba(0, 0, 0, 0.08);
	--gacounter-row-gap: 0.375rem;

	color: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* Digital counter ------------------------------------------------------- */

.gacounter__total {
	margin-bottom: 0.75rem;
}

.gacounter__total-label {
	color: var(--gacounter-label-color);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 0.375rem;
}

.gacounter__digits {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gacounter-digit-gap);
}

.gacounter__digit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--gacounter-digit-size);
	padding: 0.25rem 0.125rem;
	border: 1px solid var(--gacounter-digit-border);
	border-radius: var(--gacounter-digit-radius);
	background: var(--gacounter-digit-bg);
	color: var(--gacounter-digit-color);
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
	font-size: var(--gacounter-digit-font-size);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;

	/* Keeps the tile from resizing as digits change during the count-up. */
	font-feature-settings: "tnum" 1;
}

.gacounter__sep {
	color: var(--gacounter-sep-color);
	font-weight: 700;
	padding: 0 0.0625rem;
}

/* Period figures -------------------------------------------------------- */

.gacounter__stats {
	display: flex;
	flex-direction: column;
	gap: var(--gacounter-row-gap);
	margin: 0;
	padding: 0;
}

.gacounter__stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: var(--gacounter-row-gap);
	border-bottom: 1px solid var(--gacounter-row-border);
}

.gacounter__stat:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.gacounter__stat-label {
	color: var(--gacounter-label-color);
	font-weight: 400;
	margin: 0;
}

.gacounter__stat-value {
	color: var(--gacounter-value-color);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0;
	white-space: nowrap;
}

.gacounter__updated {
	font-size: 0.75rem;
	margin: 0.625rem 0 0;
	opacity: 0.7;
}

/* Inline variant -------------------------------------------------------- */

.gacounter--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
}

.gacounter--inline .gacounter__total {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
}

.gacounter--inline .gacounter__total-label {
	margin-bottom: 0;
}

.gacounter--inline .gacounter__digits {
	display: inline-flex;
}

.gacounter__inline-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gacounter__inline-stats .gacounter__stat {
	border-bottom: 0;
	gap: 0.375rem;
	justify-content: flex-start;
	padding-bottom: 0;
}

.gacounter--inline .gacounter__updated {
	flex-basis: 100%;
	margin-top: 0;
}

/* Small screens --------------------------------------------------------- */

@media (max-width: 480px) {
	.gacounter {
		--gacounter-digit-size: 1.25rem;
		--gacounter-digit-font-size: 1.0625rem;
	}
}

/* Dark surfaces --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.gacounter {
		--gacounter-digit-bg: #0b1220;
		--gacounter-row-border: rgba(255, 255, 255, 0.14);
	}
}

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