/* the panel of js/directives/inViewTooltip.js. place() sets its place, max width and max height
   inside the viewport, so neither a scrolling container nor a modal body clips it */
.fhc-in-view-tooltip {
	--fhc-in-view-tooltip-progress: var(--fhc-blue-primary, #0d6efd);
	position: fixed;
	z-index: 1080;
	display: flex;
	flex-direction: column;
	width: max-content;
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: 0.375rem;
	background-color: var(--bs-body-bg, #fff);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	color: var(--bs-body-color, #212529);
	font-size: 0.875rem;
	font-weight: normal;
	line-height: 1.5;
	text-align: left;
}

/* the dark primary reaches 2:1 on the dark panel, the highlight 3.9:1 */
html.dark .fhc-in-view-tooltip {
	--fhc-in-view-tooltip-progress: var(--fhc-blue-primary-highlight, #6ea8fe);
}

/* the body scrolls, so the progress border stays on the panel edge */
.fhc-in-view-tooltip-body {
	min-height: 0;
	overflow-y: auto;
	padding: 0.75rem 1rem;
	white-space: pre-line; /* the text keeps its line breaks */
}

/* the hover timer of a sticky panel: after a pause the border fills up clockwise, then the panel sticks.
   The 2 px stroke covers the 1 px border and 1 px inside it */
.fhc-in-view-tooltip-progress {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.fhc-in-view-tooltip-progress rect {
	fill: none;
	stroke: var(--fhc-in-view-tooltip-progress);
	stroke-width: 2;
	stroke-dasharray: var(--fhc-in-view-tooltip-perimeter);
	stroke-dashoffset: var(--fhc-in-view-tooltip-perimeter);
}

.fhc-in-view-tooltip--holding .fhc-in-view-tooltip-progress rect {
	animation: fhc-in-view-tooltip-hold var(--fhc-in-view-tooltip-hold-fill) ease-in var(--fhc-in-view-tooltip-hold-delay) forwards;
}

/* a click during the hover timer fills the rest of the border quickly */
.fhc-in-view-tooltip--pinned .fhc-in-view-tooltip-progress rect {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.15s linear;
}

@keyframes fhc-in-view-tooltip-hold {
	to {
		stroke-dashoffset: 0;
	}
}

/* the ? icon of components/InViewHelp.js takes the color of its context, e.g. white in the blue
   modal header. A class like text-muted overrides it */
.fhc-in-view-help-btn,
.fhc-in-view-help-btn:hover,
.fhc-in-view-help-btn:focus-visible,
.btn.fhc-in-view-help-btn:active {
	color: inherit;
}

.fhc-in-view-help-btn {
	line-height: 1;
	text-decoration: none;
}