/**
 * RuimteGeit Vliegje
 *
 * Kleuren komen uit CSS-variabelen met een terugvalwaarde, zodat het theme
 * ze kan overschrijven zonder dat dit bestand aangepast hoeft te worden.
 */

:root {
	--rgv-lijf: #12101a;
	--rgv-vleugel: rgba(255, 255, 255, .62);
	--rgv-bubbel-achtergrond: rgba(14, 10, 23, .93);
	--rgv-bubbel-rand: rgba(157, 148, 180, .3);
	--rgv-bubbel-tekst: #f0ecf6;
	--rgv-gedempt: #9d94b4;
}

#rgv-vliegje {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 44px;   /* klikdoel, ruimer dan het vliegje zelf */
	height: 44px;
	margin: -22px 0 0 -22px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#rgv-vliegje:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 50%;
}

#rgv-vliegje svg {
	width: 17px;
	height: 17px;
	display: block;
	overflow: visible;
}

.rgv-lijf {
	fill: var(--rgv-lijf);
}

.rgv-vleugel {
	fill: var(--rgv-vleugel);
	transform-origin: 2px 5px;
}

.rgv-bril circle {
	fill: none;
	stroke: var(--rgv-lijf);
	stroke-width: .45;
}

.rgv-bril path {
	stroke: var(--rgv-lijf);
	stroke-width: .45;
}

#rgv-vliegje.rgv-vliegt .rgv-v-l,
#rgv-vliegje.rgv-vliegt .rgv-v-r {
	animation: rgv-klap .07s linear infinite;
}

#rgv-vliegje.rgv-zit .rgv-v-l,
#rgv-vliegje.rgv-zit .rgv-v-r {
	transform: scaleY(.55);
}

@keyframes rgv-klap {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(.25); }
}

/* De tekstballon */

#rgv-weetje {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	width: min(19rem, calc(100vw - 2.5rem));
	opacity: 0;
	transform: translateY(3px);
	transition: opacity .5s ease, transform .5s ease;
	pointer-events: none;
}

#rgv-weetje.rgv-aan {
	opacity: 1;
	pointer-events: auto;
}

#rgv-weetje p {
	margin: 0;
	font-size: .94rem;
	line-height: 1.55;
	color: var(--rgv-bubbel-tekst);
	background: var(--rgv-bubbel-achtergrond);
	border: 1px solid var(--rgv-bubbel-rand);
	border-radius: 2px;
	padding: .85rem 1rem;
	box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
}

#rgv-wegwuiven {
	display: block;
	margin: .45rem 0 0 auto;
	background: none;
	border: 0;
	padding: .2rem;
	color: var(--rgv-gedempt);
	font: inherit;
	font-size: .72rem;
	cursor: pointer;
}

#rgv-wegwuiven:hover,
#rgv-wegwuiven:focus-visible {
	color: var(--rgv-bubbel-tekst);
}

@media (prefers-reduced-motion: reduce) {
	#rgv-vliegje.rgv-vliegt .rgv-v-l,
	#rgv-vliegje.rgv-vliegt .rgv-v-r {
		animation: none;
	}

	#rgv-weetje {
		transition: opacity .2s linear;
	}
}