/*
<style lang="eo,en,fr">
	[_lang_] { display: none; }
	:root[lang=_lang_] [_lang_] { display: inherit; }

	:root[lang=_lang_] [_lang_\:title]:hover::after { display: inherit }

	/* [_lang_\:title]:after {
		display: none;
		position: absolute;
		background: grey;
		border: 1px solid black;
		color: white;
		padding: .1em .3em;
		margin-left: -5%;
	}
	:root[lang=_lang_] [_lang_\:title]:after { content: attr(_lang_\:title) } * /
</style>
*/

// lang support
Object.defineProperty( window, 'lang', {
	get: ()=> $`:root`.getAttribute('lang')
,   set: v=> $`:root`.setAttribute( 'lang', v )
})

new MutationObserver( changes=>
	changes.map( ch=> ch.attributeName == 'lang' && $`:root`.dispatchEvent(new Event('lang')) )
)
.observe( $`:root`, { attributes: true } )

const lgAttReg = new RegExp( '^('+$`style[lang]`.attributes.lang.value.split(',').join('|')+'):')
$`:root`.on`lang`( e=> 
	$`*`.map( node=> [...node.attributes]
							.filter( att=> lgAttReg.test(att.name) )
	)
	.filter( arr=> arr.length )
	.map( atts=> atts.filter(att=>new RegExp('^'+lang+':').test(att.name))
					.map(att=> att.ownerElement.setAttribute(att.name.split(':').pop(),att.value) ))
)
// compile lang styles
Q`style[lang]`.map( style=> 
	style.innerHTML = [...style.sheet.cssRules]
		.map( r=> style.attributes.lang.value.split(',')
						.map( lg=> r.cssText.replace(/_lang_/g, lg) )
						.join('\n')
		)
		.join('\n')
)
lang = navigator.language.split(/[-_]/)[0]