:root {
	--tooltip-content-min-width: 100px;
	--tooltip-content-max-width: 500px;

	/* These variables are overwritten by JS */
	--tooltip-window-padding-x: 0px;
	--tooltip-window-padding-y: 0px;
	--tooltip-arrow-top: unset;
	--tooltip-arrow-bottom: unset;
	--tooltip-arrow-left: unset;
	--tooltip-arrow-right: unset;
}

.k2-tooltip__wrapper {
	position: relative;
	width: fit-content;
	height: fit-content;
}
.k2-tooltip-trigger {
	width: fit-content;
	height: fit-content;
	cursor: pointer;
}

.k2-tooltip-content {
	display: block;
	position: absolute;
	bottom: 100%;
	right: 0;
	padding: 0.75em;
	min-width: var(--tooltip-content-min-width);
	width: max-content;
	max-width: min(var(--tooltip-content-max-width), calc(100vw - var(--tooltip-window-padding-y) - var(--tooltip-window-padding-y)));
	background: var(--wp--preset--color--page-background);
	border: 1px solid rgb(from var(--wp--preset--color--text-color) r g b / 10%);
	box-shadow: 0 4px 8px 0 rgb(from var(--wp--preset--color--text-color) r g b / 3%);
}

.k2-tooltip-content > :first-child {
	margin-top: 0;
}

.k2-tooltip-content > :last-child {
	margin-bottom: 0;
}

html:not(.block-editor-iframe__html) body:not(.tooltips-initialized) .k2-tooltip-content,
.k2-tooltip-content.hidden {
	display: none;
}