:root{
	--tooltip-triangle-size:12px
}
.tooltip-trigger{
	white-space:nowrap;
	border-bottom:1px dotted var(--color-contrast-high);
	cursor:help
}
.tooltip{
	position:absolute;
	z-index:var(--z-index-popover,5);
	display:inline-block;
	padding:var(--space-xxs) var(--space-xs);
	border-radius:var(--radius-md);
	max-width:200px;
	background-color:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),0.98);
	box-shadow:var(--shadow-md);
	color:var(--color-bg);
	font-size:var(--text-sm);
	line-height:1.4;
	transition:opacity .2s,visibility .2s
}
.tooltip a{
	color:inherit;
	text-decoration:underline
}
@supports(-webkit-clip-path:inset(50%)) or (clip-path:inset(50%)){
	.tooltip::before{
		content:"";
		position:absolute;
		background-color:inherit;
		border:inherit;
		width:var(--tooltip-triangle-size);*/
		height:var(--tooltip-triangle-size);*/
		-webkit-clip-path:polygon(0% 0%,100% 100%,100% 100%,0% 100%);
		clip-path:polygon(0% 0%,100% 100%,100% 100%,0% 100%)
	}
}
.tootip:not(.tooltip--sticky){
	pointer-events:none
}
.tooltip--sm{
	max-width:150px;
	font-size:var(--text-xs);
	padding:var(--space-xxxs) var(--space-xxs)
}
.tooltip--md{
	max-width:300px;
	padding:var(--space-xs) var(--space-sm)
}
.tooltip--lg{
	max-width:350px;
	font-size:var(--text-base-size);
	padding:var(--space-xs) var(--space-sm)
}
.tooltip{
	--tooltip-triangle-translate:0px
}
.tooltip--top::before,.tooltip--bottom::before{
	left:calc(50% - var(--tooltip-triangle-size)/2)
}
.tooltip--top::before{
	bottom:calc(var(--tooltip-triangle-size) * -0.5);
	transform:translateX(var(--tooltip-triangle-translate)) rotate(-45deg)
}
.tooltip--bottom::before{
	top:calc(var(--tooltip-triangle-size) * -0.5);
	transform:translateX(var(--tooltip-triangle-translate)) rotate(135deg)
}
.tooltip--left::before,.tooltip--right::before{
	top:calc(50% - var(--tooltip-triangle-size)/2)
}
.tooltip--left::before{
	right:calc(var(--tooltip-triangle-size) * -0.5);
	transform:translateX(var(--tooltip-triangle-translate)) rotate(-135deg)
}
.tooltip--right::before{
	left:calc(var(--tooltip-triangle-size) * -0.5);
	transform:translateX(var(--tooltip-triangle-translate)) rotate(45deg)
}
.tooltip--hide{
	visibility:hidden;
	opacity:0
}
.copy-to-clip{
	display:flex;
	justify-content:center;
	align-items:center;
	width:30px;
	height:30px;
	border-radius:var(--radius-md);
	background-color:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),0.1);
	cursor:pointer;
	transition:.2s
}
.copy-to-clip:hover{
	background-color:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),0.15)
}
.copy-to-clip:focus{
	outline:none;
	box-shadow:0 0 0 2px hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),0.35)
}
.copy-to-clip__icon-check{
	stroke-dashoffset:8.49;
	stroke-dasharray:8.49 8.49;
	transition:stroke-dashoffset .3s
}
.copy-to-clip--copied{
}
.copy-to-clip--copied .copy-to-clip__icon-check{
	stroke-dashoffset:0
}
