global css
	html, body m:0 p:0
	body ff:mono bgc:gray9 mt:80px mt@portrait: 0
	a c:violet6 td:none td@hover:underline
	.active filter:brightness(130%)
	.activated bgc:violet3
	.disabled, .disabled@hover filter:grayscale(100%)
	.zoomed scale:1.05
	.button d:inline-block m:2px bgc:none c:violet7 td:none bxs:sm us:none cursor:pointer
	.button@hover, .button.active bxs:md filter:hue-rotate(5deg) mb:0px pt:12px td:none
	.button, code, .bordered p:10px bd:2px solid violet5 rd:10px d:inline-block
	.bordered p:2.5px bw:1.5px c:violet9
	.night filter:invert(20%)
	.gradient
		bg:linear-gradient(to right,violet7,blue6,violet7)
		fw:normal
		-webkit-background-clip:text
		-webkit-text-fill-color:transparent

tag App
	css
		d:vcc mx:auto my:50px bgc:white p:40px pb:60px rd:5px maw:1024px of:auto
		@lt-xs m:0 px:0 rd:0

	<self.night=R.param('night') .zoomed=R.param('zoomed')>
		<param-preview>
		<h2.gradient> "pro-router-imba2: Imba2 integration with pro-router"
		<[d:flex flw:wrap w:100% jc:space-between]>
			<app-menu>
			<pro-router[mx:40px]>
		###
		<pro-ref view="b" params={ project: 2}> "b/project/2"
		<pro-ref-f view="c" params={ book: 3}> "c/book/3"
		
		<input$v type='text' value=R.param('e') @keyup=R.write('e', $v.value)>
		###

tag app-menu
	<self[d:flex fld:row flw@lt-xs:wrap mx:auto mb: 50px jc:center]>
		<pro-ref.button view=v> v.toUpperCase! for v in R.views

tag param-preview
	<self> "{R.view}: {JSON.stringify(R.params).replace(/"/g, ' ')}"

tag imba-code < pre
	prop file
	prop url
	css
		&.no-code code.content p:0
		code d:block bd:0 rd:0 bgc:gray8
			&.file bgc:amber3
			&.content c:gray3
			&.url bgc:gray3
				.url bgc:white c:gray7 rd:full p:4px
	<self[bgc:gray1 bd:1.1px solid gray3 fs:larger bxs:md]>
		<code.file> file if file
		<code.url><.url> url if url
		<slot name='live'>
		<code.content><slot>
tag code-inline < imba-code
	css
		d:inline
		code d:inline-block

tag c-el
	css d:inline c:gray3
tag c-op < c-el
	css c:white fw:bold
tag c-fl < c-el
	css c:purple5
tag c-c < c-el
	css c:blue3
tag c-com < c-el
	css c:gray5
	<self>
		"# "
		<slot>
tag c-str < c-el
	<self> "'{<[c:amber6 d:inline]><slot>}'"
global css .c-br c:amber4 d:inline

tag c-tag < c-el
	<self[c:white]>
		"<"
		<[c:blue4 d:inline]><slot>
		">"

tag c-tag-def < c-el
	<self[c:blue4]>
		"tag "
		<[c:green5 d:inline]><slot>
tag c-let < c-el
	<self[c:blue4]>
		"let "
		<c-el><slot>

tag pro-tip
	<self[bgc:gray0 p:15px]>
		<[c:violet7 fw:bold txs:amber4 bdb:1.5px solid violet4]> "PRO TIP: "
		<slot>

global def Goto(target)
	R.go(location.href)
	target.scrollIntoView!

global css
	.c-list
		bgc:yellow1 py:30px mb:60px w:fit-content
		li pr: 35px
		li@hover cursor:pointer
		ul fw:bold
		li li fw:normal c:blue6
		li li@hover c:blue4

tag content-list < ul
	<self.c-list><slot>

import './views/home.imba'
import './views/installation.imba'
import './views/usage.imba'
import './views/choosing-router-style.imba'

imba.mount <App> if import.meta.env.MODE is 'development'