/* OVERRIDE CHRONOS DEAFULT SETTINGS FOR OBSIDIAN */
/* Chronos theme variables mapped to Obsidian theme vars */
.chronos-timeline-container {
	/* neutrals / misc */
	--chronos-semi-gray: hsla(0, 0%, 50%, 0.4);
	--chronos-opacity: 0.2;

	/* backgrounds & surfaces */
	--chronos-bg-primary: var(--background-primary);
	--chronos-bg-secondary: var(--background-secondary);

	/* text */
	--chronos-text-normal: var(--text-normal);
	--chronos-text-muted: var(--text-muted);
	--chronos-text-on-accent: var(--text-on-accent);
	--chronos-bg-text: var(--text-on-primary);

	/* accent / interactive */
	--chronos-accent: var(--interactive-accent);
	--chronos-accent-hover: var(--interactive-accent-hover);
	--chronos-accent-alpha: hsl(
		var(--accent-h) var(--accent-s) var(--accent-l) / 0.2
	);
	--chronos-interactive: var(--interactive-accent);
	--chronos-interactive-hover: var(--interactive-accent-hover);

	/* borders / focus */
	--chronos-border: var(--text-muted);
	--chronos-border-active: rgba(3, 102, 214, 0.5);

	/* radius / icons */
	--chronos-radius: 6px;
	--chronos-radius-small: 3px;
	--chronos-icon-color: var(--text-muted);

	/* palette */
	--chronos-color-red: var(--color-red);
	--chronos-color-red-rgb: var(--color-red-rgb);

	--chronos-color-green: var(--color-green);
	--chronos-color-green-rgb: var(--color-green-rgb);

	--chronos-color-blue: var(--color-blue);
	--chronos-color-blue-rgb: var(--color-blue-rgb);

	--chronos-color-yellow: var(--color-yellow);
	--chronos-color-yellow-rgb: var(--color-yellow-rgb);

	--chronos-color-orange: var(--color-orange);
	--chronos-color-orange-rgb: var(--color-orange-rgb);

	--chronos-color-purple: var(--color-purple);
	--chronos-color-purple-rgb: var(--color-purple-rgb);

	--chronos-color-pink: var(--color-pink);
	--chronos-color-pink-rgb: var(--color-pink-rgb);

	--chronos-color-cyan: var(--color-cyan);
	--chronos-color-cyan-rgb: var(--color-cyan-rgb);
}

.workspace-leaf-content[data-type="chronos-timeline"] .view-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.chronos-error-message-container {
	padding: 1rem 1.5rem;
}

.chronos-timeline-container .vis-timeline {
	border: 2px solid transparent !important;
	border-radius: 0 !important;
	cursor: default;
}

.chronos-timeline-container .vis-timeline.vis-active {
	border-color: hsla(var(--color-accent-hsl), 0.5) !important;
	border-radius: 0 !important;
}

.chronos-timeline-container .vis-label {
	color: var(--text-muted) !important;
}

.chronos-timeline-container .vis-custom-time,
.chronos-timeline-container .vis-custom-time-marker {
	color: var(--color-base-00) !important;
	background-color: var(--color-base-70) !important;
}

.chronos-timeline-container .vis-item.vis-background {
	background-color: hsla(var(--color-accent-hsl), 0.2);
	color: var(--text-on-primary);
}

.chronos-timeline-container .vis-item {
	border-radius: var(--radius-s) !important;
	border-color: var(--color-accent);
}

.chronos-timeline-container .vis-time-axis .vis-grid.vis-minor {
	border-color: var(--chronos-semi-gray) !important;
}

.chronos-timeline-container .vis-minor {
	color: var(--text-muted) !important;
}

.chronos-timeline-container .vis-major {
	color: var(--text-muted) !important;
}

/* Link styles*/
.chronos-timeline-container .is-link {
	cursor: pointer !important;
}

.chronos-timeline-container .is-link .vis-item-content {
	text-transform: none !important;
	text-decoration: underline !important;
	text-decoration-line: underline !important;
	text-decoration-style: solid !important;
	text-decoration-color: currentColor !important;
	text-underline-offset: 5px !important;
}

.chronos-timeline-container .vis-item-content {
	text-decoration: inherit !important;
}

.chronos-timeline-container .vis-dot,
.chronos-timeline-container .vis-line {
	background-color: var(--interactive-accent) !important;
	color: var(--interactive-accent) !important;
}

/* Ensure code editor button is always on top and easy to find with pointer, 
   in chronos blocks only as to not interfer with normal Obsidian behavior 
 */
.block-language-chronos ~ .edit-block-button {
	z-index: 999;
	cursor: pointer !important;
}

.vis-custom-time[title]::after {
	content: attr(title);
	display: none;
}

.chronos-setting-header {
	color: var(--text-muted);
}

.chronos-settings-md-container {
	min-height: 250px;
	width: 100%;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid var(--interactive-border-color);
	background-color: var(--color-base-20);
	border-radius: 5px;
	font-family: var(--font-monospace), "Source Code Pro", "Courier New",
		monospace;
}

.ai-setting.is-disabled {
	display: none;
}