@import url("./style.css");
@import url("./grid.css");

:root{
	color-scheme: dark;
	--bg-active: #AFA2;
	--bg-warning: #FA02;
	--border-active: #AFA8;
	--text-muted: #FFF8;
}

html{
	-webkit-text-size-adjust: 100%;
}

body{
	padding: max(0.4em, env(safe-area-inset-top)) max(0.4em, env(safe-area-inset-right)) max(0.4em, env(safe-area-inset-bottom)) max(0.4em, env(safe-area-inset-left));
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

button,
[role="button"]{
	font-family: inherit;
	user-select: none;
	-webkit-user-select: none;
}

button:focus-visible,
[role="button"]:focus-visible{
	outline: 0.12em solid gold;
	outline-offset: 0.12em;
}

#current_bpm{
	font-weight:bold;
	color:lime;
	align-items:center;
}

#display{
	margin-bottom: 0.3em;
}

#loops{
	margin-top: 0.4em;
}

.loop-list.active,
#loops button.active{
	background: var(--bg-active);
	color:#FFF;
	box-shadow: inset 0 0 0 0.08em var(--border-active);
}

#play_button svg,
#stop_button svg{
	margin: 0;
	width: 1.8em;
	height: 1.8em;
}

#status{
	min-height: 1.4em;
	margin: 0.35em auto;
	font-size: 0.55em;
	line-height: 1.35;
	color: var(--text-muted);
}

#status.warning{
	color: #FFD;
}

@media (display-mode: standalone){
	body{
		padding-top: max(0.6em, env(safe-area-inset-top));
	}
}

@media (max-width: 480px){
	.grid-3{
		grid-template-columns: repeat(3, 1fr);
	}
	.grid>*{
		padding: 0.85em 0.5em;
	}
	#loops.grid{
		grid-template-columns: 1fr;
	}
}