:root {
	--ddm-dot-size: 12px;
}

.ddm-pointer-label {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99998;
	width: var(--ddm-dot-size);
	height: var(--ddm-dot-size);
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--ddm-accent-color);
	transform: translate3d(-100px, -100px, 0);
	pointer-events: none;
	will-change: transform, width, height;
	transition: width 160ms ease, height 160ms ease, border-radius 160ms ease;
}

.ddm-pointer-label::before,
.ddm-pointer-label::after {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	transition: opacity 100ms ease, visibility 100ms;
}

/* Upper tab and concave join form one connected shape with the main label. */
.ddm-pointer-label::before {
	content: "VIEW";
	left: 0;
	bottom: calc(100% - 1px);
	width: 76px;
	height: 23px;
	padding: 5px 11px 0;
	border-radius: 13px 13px 0 0;
	background: var(--ddm-accent-color);
	color: #111;
	font: 700 10px/1 "Manrope", Arial, sans-serif;
	letter-spacing: .08em;
}

.ddm-pointer-label::after {
	content: "";
	left: 76px;
	top: -9px;
	width: 9px;
	height: 9px;
	background: radial-gradient(circle at top right, transparent 9px, var(--ddm-accent-color) 9.5px);
}

.ddm-pointer-label__text {
	position: absolute;
	left: 12px;
	top: 50%;
	width: max-content;
	max-width: min(280px, calc(100vw - 40px));
	max-height: calc(100vh - 90px);
	overflow: hidden;
	overflow-wrap: anywhere;
	color: #111;
	font: 700 13px/1.25 "Manrope", Arial, sans-serif;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 90ms ease;
}

.ddm-pointer-label.is-label {
	width: var(--ddm-label-width);
	height: var(--ddm-label-height);
	border-radius: 0 17px 17px 17px;
}

.ddm-pointer-label-target,
.ddm-pointer-label-target * {
	cursor: none !important;
}

.ddm-pointer-label.is-label::before,
.ddm-pointer-label.is-label::after {
	visibility: visible;
	opacity: 1;
}

.ddm-pointer-label.is-label .ddm-pointer-label__text {
	opacity: 1;
}

@media (hover: none), (pointer: coarse) {
	.ddm-pointer-label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ddm-pointer-label,
	.ddm-pointer-label::before,
	.ddm-pointer-label::after,
	.ddm-pointer-label__text {
		transition-duration: 0.01ms;
	}
}