/* TODO configure most of these from a new settings page */
/* TODO test it with the default themes in Obsidian, light and dark */
div:has(.block-language-habittracker),
.ht21-tooltip {
	/* Colors */
	--habit-bg: var(--background-primary);
	--habit-bg-ticked: var(--checkbox-color);
	--habit-icon-ticked: var(--checkbox-marker-color);
	--habit-border: 1px solid var(--divider-color);
	--habit-outer-border: var(--habit-border);
	--habit-horizontal-border: var(--habit-border);
	--habit-vertical-border: var(--habit-border);
	--habit-row-bg-hover: var(--background-secondary);
	--habit-highlight-weekend: var(--background-secondary);
	--habit-highlight-names: var(--background-secondary);
	--habit-container-hover: var(--background-secondary);
	--habit-tick-hover: var(--color-base-00);
	--habit-name-text-color: var(--link-color);
	--habit-header-bg-hover: var(--color-base-100);
	--habit-tooltip-bg: var(--color-base-100);
	--habit-header-text-hover: var(--color-base-00);

	/* TODO: make the scroll bar not take vertical space at the bottom at least in synthwave theme */

	/* Typography */
	--habit-header-font-size: 11px;
	--habit-name-font-size: 13px;

	/* Cell dimensions */
	--habit-cell-width: 25px;
	--habit-cell-height: 32px;
	--habit-name-max-width: 173px;
	--habit-name-padding: 8px;

	/* Tick size */
	--habit-tick-size: 16px;
	--habit-tick-roundess: calc(var(--habit-tick-size) / 2);

	/* Border radius */
	--habit-streak-radius: calc(var(--habit-tick-size) / 2);
	--habit-tooltip-radius: 3px;

	/* Spacing */
	--habit-streak-padding: 4px;
	--habit-tooltip-padding: 2px 6px;
}

/* Action bar for habit tracker code blocks */
.ht21-action-bar {
	display: flex;
	position: absolute;
	top: 90%;
	left: var(--habit-name-padding);
	right: var(--habit-name-padding);
	background: var(--background-secondary);
	border: var(--habit-border);
	border-radius: 0 0 var(--radius-s) var(--radius-s);
	padding: var(--habit-name-padding);
	justify-content: space-between;
	align-items: center;
	z-index: 100;
	font-size: 12px;
	opacity: 0;
	transition: all 0.2s ease;
	box-shadow: var(--shadow-s);
	pointer-events: none;
}

/* Show action bar on hover of the code block or its parent container */
.markdown-source-view.mod-cm6 .cm-content > .cm-lang-habittracker:hover {
	overflow: visible;
	contain: none !important;
}
.cm-lang-habittracker:hover .ht21-action-bar,
.cm-preview-code-block.markdown-rendered:has(.block-language-habittracker):hover
	.ht21-action-bar {
	opacity: 1;
	pointer-events: all;
	top: 100%;
}

.ht21-action-bar__title {
	font-weight: 600;
	color: var(--text-muted);
}

.ht21-update-dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 8px;
	height: 8px;
	background: var(--color-purple);
	border-radius: 50%;
	border: 1px solid var(--background-secondary);
}

.ht21-action-bar__buttons {
	display: flex;
	gap: 8px;
}

.ht21-action-bar__btn {
	background: var(--interactive-normal);
	border: var(--habit-border);
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 11px;
	cursor: pointer;
	color: var(--text-normal);
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ht21-btn-text {
	font-size: 11px;
}

.ht21-action-bar__btn .svg-icon {
	width: 14px;
	height: 14px;
}

.ht21-action-bar__btn:hover {
	background: var(--interactive-hover);
	border-color: var(--border-color-hover);
}

.ht21-action-bar__btn:active {
	background: var(--interactive-active);
}

.cm-preview-code-block.markdown-rendered:has(.block-language-habittracker) {
	padding: 0;
	font-family: monospace;
	position: relative;
}

/* Ensure code blocks in source view also support the action bar */
.cm-lang-habittracker {
	position: relative;
}
.cm-preview-code-block.markdown-rendered:has(
		.block-language-habittracker
	):hover {
	background-color: var(--habit-container-hover);
}
.cm-preview-code-block.markdown-rendered:has(.block-language-habittracker):hover
	.edit-block-button {
	display: none !important;
}

.block-language-habittracker {
	border: var(--habit-outer-border);
	border-radius: var(--radius-s);
	overflow-x: scroll;
	width: fit-content;
	max-width: 100%;
	scrollbar-width: thin;
}

.habit-tracker {
	display: grid;
	grid-template-columns: 1fr repeat(
			var(--date-columns),
			var(--habit-cell-width)
		);
	width: fit-content;
	background-color: var(--habit-bg);
}

.is-readable-line-width .habit-tracker--match-line-length {
	min-width: calc(
		var(--file-line-width) - 2px
	); /* TODO: this is a hack since I know the widht of the border. but it won't scale. figure out a way to fix this that hopefully doesn't break overrides people added in place */
}

.habit-tracker__row {
	display: contents;
}

.habit-tracker__row:has(.habit-tracker__cell:hover) > .habit-tracker__cell {
	background-color: var(--habit-row-bg-hover);
}

.habit-tracker__cell {
	width: var(--habit-cell-width);
	font-size: var(--habit-header-font-size);
	height: var(--habit-cell-height);
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}
.habit-tracker__cell:not(:last-child) {
	border-right: var(--habit-vertical-border);
}
.habit-tracker__row:not(.habit-tracker__header) .habit-tracker__cell {
	border-top: var(--habit-horizontal-border);
}
/*
*/

.habit-tracker__cell--name {
	padding: 0 var(--habit-name-padding);
	width: 100%;
	max-width: var(--habit-name-max-width);
	justify-content: start;
	position: sticky;
	left: 0;
	z-index: 10;
	background-color: var(--habit-highlight-names);
}
.habit-tracker__cell--name .internal-link {
	color: var(--habit-name-text-color);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: fit-content;
	display: inline-block;
	font-size: var(--habit-name-font-size);
	text-decoration: none;
}
.is-readable-line-width
	.habit-tracker--match-line-length
	.habit-tracker__cell--name {
	max-width: 100%;
}

.habit-tracker__cell--saturday,
.habit-tracker__cell--sunday {
	background-color: var(--habit-highlight-weekend);
	font-weight: bold;
}

.habit-tracker__header .habit-tracker__cell[data-ht21-pretty-date] {
	position: relative;
}
.habit-tracker__header .habit-tracker__cell[data-ht21-pretty-date]:hover {
	cursor: pointer;
	background: var(--habit-header-bg-hover);
	color: var(--habit-header-text-hover);
	border-top-left-radius: var(--habit-tooltip-radius);
	border-top-right-radius: var(--habit-tooltip-radius);
}

.habit-tracker__header .habit-tracker__cell[data-ht21-pretty-date]:hover:after {
	background: var(--habit-header-bg-hover);
	color: var(--habit-header-text-hover);
	content: attr(data-ht21-pretty-date);
	left: 50%;
	padding: var(--habit-tooltip-padding);
	position: absolute;
	top: 100%;
	white-space: nowrap;
	transform: translateX(-50%);
	border-radius: var(--habit-tooltip-radius);
}
.habit-tracker__header
	.habit-tracker__cell[data-ht21-pretty-date]:last-child:hover:after {
	left: auto;
	right: 0;
	transform: none;
	border-top-right-radius: 0;
}

.habit-tick {
	line-height: 0;
	text-align: center;
	width: var(--habit-cell-width);
	max-width: var(--habit-cell-width);
	min-width: var(--habit-cell-width);
	padding-left: var(--habit-streak-padding);
	padding-right: var(--habit-streak-padding);
	line-height: var(--habit-tick-size);
}
.habit-tick:hover {
	cursor: pointer;
	background-color: var(--habit-tick-hover) !important;
}

.habit-tick__inner {
	display: block;
	height: var(--habit-tick-size);
	width: 100%;
}

.habit-tick--ticked .habit-tick__inner {
	background: var(--habit-bg-ticked);
	transition: all 0.3s ease;
	color: var(--habit-icon-ticked);
	border-radius: var(--habit-tick-roundess);
}

.habit-tick--streak {
	padding-left: 0;
	padding-right: 0;
}
.habit-tick--streak .habit-tick__inner {
	border-radius: 0;
}

.habit-tick--streak-start {
	padding-left: var(--habit-streak-padding);
}
.habit-tick--streak-start .habit-tick__inner {
	border-top-left-radius: var(--habit-streak-radius);
	border-bottom-left-radius: var(--habit-streak-radius);
}
.habit-tick--streak-end {
	padding-right: var(--habit-streak-padding);
}
.habit-tick--streak-end .habit-tick__inner {
	border-top-right-radius: var(--habit-streak-radius);
	border-bottom-right-radius: var(--habit-streak-radius);
}
.habit-tick--streak + .habit-tick--streak-end .habit-tick__inner,
.habit-tick--streak-count .habit-tick__inner {
	font-weight: bold;
}

.habit-tick--streak-gap .habit-tick__inner {
	/* background: color-mix(in srgb, var(--habit-bg-ticked) 30%, transparent); */
	background: var(--habit-bg-ticked);
	height: 8px;
}
.habit-tick--ticked + .habit-tick--gap-default:before {
	display: inline-block;
	content: '';
	width: calc(var(--habit-tick-size) / 2);
	height: var(--habit-tick-size);
	background-color: var(--habit-bg-ticked);
	border-top-right-radius: var(--habit-tick-roundess);
	border-bottom-right-radius: var(--habit-tick-roundess);
	flex: auto 0 0;
	margin-right: calc(var(--habit-tick-size) / -2);
}
.habit-tick--gap-default:has(+ .habit-tick--ticked):after {
	display: inline-block;
	content: '';
	width: calc(var(--habit-tick-size) / 2);
	height: var(--habit-tick-size);
	background-color: var(--habit-bg-ticked);
	border-top-left-radius: var(--habit-tick-roundess);
	border-bottom-left-radius: var(--habit-tick-roundess);
	flex: auto 0 0;
	margin-left: calc(var(--habit-tick-size) / -2);
}

/* Faded gap style: full-height transparent bar instead of short bar with transitions */
.habit-tick--gap-faded .habit-tick__inner {
	background: color-mix(in srgb, var(--habit-bg-ticked) 30%, transparent);
	height: var(--habit-tick-size);
}

/* Counter on a gap day: faded background, full-color text */
.habit-tick--streak-gap.habit-tick--streak-end .habit-tick__inner,
.habit-tick--streak-gap.habit-tick--streak-count .habit-tick__inner {
	color: inherit;
}

/* Deadline day: faded tick to hint the streak is about to break */
.habit-tick--streak-deadline .habit-tick__inner {
	background: color-mix(in srgb, var(--habit-bg-ticked) 30%, transparent);
	border-radius: var(--habit-tick-roundess);
}

.ht21-tooltip {
	background: var(--habit-tooltip-bg);
	border-radius: var(--habit-tooltip-radius);
	color: var(--habit-header-text-hover);
	font-size: var(--habit-name-font-size);
	padding: var(--habit-tooltip-padding);
	pointer-events: none;
	position: fixed;
	transform: translate(-50%, -100%);
	white-space: nowrap;
	z-index: 1000;
}

.habit-tracker__header .habit-tracker__cell--today {
	color: var(--habit-name-text-color);
}