/**
 * The vocabulary the three configuration pages share. Both renderings — the
 * editable forms and the file-mode definition lists — sit on the same panels
 * and headings, so the page keeps its shape when authority changes.
 */

import * as stylex from "@stylexjs/stylex";
import { colors } from "@/ui/tokens.stylex";

export const styles = stylex.create({
	heading: {
		fontSize: "1.5rem",
		lineHeight: "2rem",
		fontWeight: 600,
	},
	intro: {
		marginTop: "0.25rem",
		maxWidth: "48rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textMuted,
	},
	panel: {
		marginTop: "1rem",
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.border,
		padding: "1rem",
	},
	panelHeading: {
		fontSize: "1.125rem",
		lineHeight: "1.75rem",
		fontWeight: 500,
	},
	/** The collection's own key in the configuration file, beside its heading. */
	panelKey: {
		marginLeft: "0.5rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
		fontWeight: 400,
		color: colors.textMuted,
	},
	note: {
		marginTop: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textMuted,
	},
	/** The file-mode page note: where edits happen, and what applies them. */
	fileNote: {
		marginTop: "1rem",
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.border,
		backgroundColor: colors.surfaceHover,
		paddingInline: "0.75rem",
		paddingBlock: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textSecondary,
	},
	table: {
		width: "100%",
		minWidth: "max-content",
		borderCollapse: "collapse",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
	empty: {
		marginTop: "0.5rem",
		color: colors.textMuted,
	},
	/** Master/detail: the group list beside the selected group. */
	split: {
		marginTop: "1rem",
		display: "grid",
		gap: "1rem",
		gridTemplateColumns: {
			default: "repeat(1, minmax(0, 1fr))",
			"@media (min-width: 900px)": "16rem 1fr",
		},
		alignItems: "start",
	},
	masterList: {
		display: "flex",
		flexDirection: "column",
		gap: "0.25rem",
	},
	masterLink: {
		display: "block",
		borderRadius: "0.25rem",
		paddingInline: "0.75rem",
		paddingBlock: "0.375rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		textDecorationLine: "none",
		color: colors.textSecondary,
		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
	},
	masterLinkActive: {
		backgroundColor: colors.surfaceHover,
		color: colors.text,
		fontWeight: 500,
	},
	actionRow: {
		marginTop: "1rem",
		display: "flex",
		flexWrap: "wrap",
		alignItems: "center",
		gap: "0.75rem",
	},
	success: {
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.primaryOnSurface,
	},
	/** The authority error state: no forms, no definition list, one way forward. */
	blocked: {
		marginTop: "1rem",
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.warnBorder,
		backgroundColor: colors.warnSurface,
		color: colors.warnText,
		padding: "1rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
	pending: {
		marginTop: "1rem",
		color: colors.textMuted,
	},
	restartTag: {
		marginLeft: "0.375rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
		color: colors.textMuted,
	},
});