/* 1		Tooltips
   ================================================================ */

/* 1.1		Shared body-level tooltip
   ---------------------------------------------------------------- */

.site-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	max-width: min(240px, calc(100vw - 16px));
	padding: 2px 4px;
	border-radius: var(--border-radius-tiny);
	background: rgba(0, 0, 0, 0.5);
	box-shadow: none;
	font-size: var(--x-small-font-size);
	font-weight: 400;
	line-height: var(--x-small-line-height);
	letter-spacing: normal;
	text-align: center;
	color: rgb(255, 255, 255);
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	white-space: nowrap;
	z-index: 2147483647;
}

.site-tooltip.is-visible {
	visibility: visible;
	opacity: 1;
}

.site-tooltip.has-wrapped-text {
	white-space: normal;
}

/* 1.2		BuddyBoss birthday tooltip
   ---------------------------------------------------------------- */

#widget--birthdays .send_wishes .tooltip_wishes {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, 0);
	padding: 2px 4px;
	border-radius: var(--border-radius-tiny);
	margin: 0 0 5px;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: none;
	font-size: var(--x-small-font-size);
	font-weight: 400;
	line-height: var(--x-small-line-height);
	color: rgb(255, 255, 255);
	pointer-events: none;
	transition: none;
	white-space: nowrap;
	z-index: 10;
}

#widget--birthdays .send_wishes:not(.tooltip-visible) .tooltip_wishes {
	visibility: hidden;
	opacity: 0;
}

#widget--birthdays .send_wishes.tooltip-visible .tooltip_wishes {
	visibility: visible;
	opacity: 1;
}

@media (hover: none), (pointer: coarse) {
	.site-tooltip,
	#widget--birthdays .send_wishes .tooltip_wishes {
		display: none;
	}
}

/* 2		Medium Editor link preview
   ---------------------------------------------------------------- */

/* This interactive preview is intentionally separate from tooltips. */
.medium-editor-toolbar-anchor-preview {
	padding: 2px 4px;
	border-radius: var(--border-radius-tiny);
	background-color: rgba(0, 0, 0, 0.5);
	font-size: var(--x-small-font-size);
	font-weight: 400;
	line-height: var(--x-small-line-height);
	text-align: left;
	color: rgb(255, 255, 255);
}

.medium-editor-toolbar-anchor-preview a {
	display: inline;
	padding: 0;
	color: inherit;
}

.medium-editor-toolbar-anchor-preview a:hover {
	text-decoration: underline;
}