/* --------------------------------------------------

Reset

*/

*,*::before,*::after { box-sizing: border-box; }

body
{
	margin: 0;
	font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;

	background: 0 0 / 0.3rem 0.3rem radial-gradient( hsla( 220 , 20% , 10% , 0.15 ) , transparent ),
	            linear-gradient( -30deg , hsl( 220 , 15% , 17% ) , hsl( 220 , 15% , 30% ) );

	color: white;
}

/* --------------------------------------------------

Layout

*/

html { height: 100%; }

body
{
	display: grid;
	min-height: 100%;
}

body > * 
{
	margin: auto;
}

/* --------------------------------------------------

Buttons

*/

button
{
	--background: hsl( 220 , 15% , 30% );
	--highlight: hsla( 220 , 50% , 80% , 0.3 );
	--shade: hsl( 220 , 15% , 23% );
	--shadow: hsla( 220 , 15% , 10% , 0.5 );
	
	font: inherit;
	line-height: inherit;
	font-weight: bold;
	
	position: relative;

	border: none;
	border-radius: 0.4rem;

	color: white;
	background: var( --background );

	box-shadow: 0 0.3rem 0 var( --shade ),
	            0 0.6rem 0.2rem var( --shadow ),
	            0 1px 1px var( --highlight ) inset;
	
	transform: translatey( calc( 1px - 0.3rem  ) );
	
	transition: all 200ms cubic-bezier( 0.5,2 , 0.8,1 );
}

button:active
{
	box-shadow: 0 1px 0 var( --shade ),
	            0 2px 0.3rem var( --shadow ),
	            0 1px 1px var( --highlight ) inset;

	transform: translatey( 0 );

	transition: none;
}

/* --------------------------------------------------

Text/number inputs

*/

input
{
	border: none;
	background: none;
	color: inherit;
	font: inherit;
	appearance: none;
	text-align: right
}

label
{
	font-size: 0.66em;
}

/* --------------------------------------------------

SVG icons

*/

.svg_icon
{
	width: 0.7em;
	height: 0.7em;
}

/* --------------------------------------------------

Main metronome

*/

.m_metronome
{
	width: 100%;
	max-width: 40em;
	height: 100%;

	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	
	gap: 0.5rem;
	padding: 0.5rem;
}

/* Show/hide when playing utility classes */

.m_metronome.is_stopped .m_show_when_playing { display: none; }
.m_metronome.is_playing .m_show_when_playing { display: block; }

.m_metronome.is_stopped .m_hide_when_playing { display: block; }
.m_metronome.is_playing .m_hide_when_playing { display: none; }

/* --------------------------------------------------

Sequencer

*/

.m_sequencer
{
	display: flex;
	flex-flow: column nowrap;
	gap: 0.5rem;

	/* Compensate for button lift */
	padding-top: 0.3rem;
}

.m_sequencer_steps
{
	display: flex;
	flex-flow: row wrap;

	gap: 0.25rem;
}

.m_sequencer_step
{
	display: block;
	height: 7em;
	flex-grow: 1;
}

/* Colour variants */

.m_sequencer_step[data-type="tick"]
{
	--background: orangered;
	--highlight: orange;
	--shade: brown;
}

.m_sequencer_step[data-type="tock"]
{
	--background: limegreen;
	--highlight: chartreuse;
	--shade: green;
}

/* FX overlay */

.m_sequencer_step::after
{
	content:'';
	display: block;
	opacity:0.4;

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: radial-gradient( transparent , var( --background ) ),
	            100% / 0.4rem 0.4rem radial-gradient( var( --highlight ) , transparent );
	
	box-shadow: 0 1px 1px var( --highlight ) inset; /* Mimics the highlight on main element */
	
	border-radius: inherit;
}

/* Flashing animation */

@keyframes flash
{
	from { background: var( --highlight ); }
	to { background: var( --background ); }
}

.m_sequencer_step.is_active
{
	animation-name: flash;
	animation-duration: 300ms;
}

/* --------------------------------------------------

Beats controls

*/

.m_beats
{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.5rem;

	font-size: calc( 1.25vw + 1.25vh + 1.25rem );
}

.m_beats_label
{
	color: hsl( 200 , 5% , 50% );
}

.m_beats_input
{
	width: 1.5em;
}

.m_beats_add_button,
.m_beats_remove_button
{
	padding: 0.3em;
}

/* Get rid of the bottom gap */
.m_beats_add_button > .svg_icon,
.m_beats_remove_button > .svg_icon
{
	display: block;
}

/* --------------------------------------------------

Tempo controls

*/

.m_tempo
{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.5rem;

	font-size: calc( 2.5vw + 2.5vh + 2.5rem );
}

.m_tempo_label
{
	color: hsl( 200 , 5% , 50% );
}

.m_tempo_input
{
	width: 2em;
}

.m_tempo_increase_button,
.m_tempo_decrease_button
{
	padding: 0.3em;
}

/* Get rid of the bottom gap */
.m_tempo_increase_button > .svg_icon,
.m_tempo_decrease_button > .svg_icon
{
	display: block;
}

/* --------------------------------------------------

Play/pause button

*/

.m_playpause
{
	text-align: center;
}

.m_playpause_button
{
	width: 100%;
	padding: 0.3em;
	font-size: calc( 3vw + 3vh + 3rem );
}

.m_playpause_button > .svg_icon
{
	display: block;
	margin: 0 auto;
}

/* -------------------------------------------------- */