@import url(variables.css);
@import url(reset.css);

/* Common tags */
html, body {
	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
}

body {
	background-color: var(--primary-bg);
	color: var(--primary-fg);
}

h1 {
	text-align: center;
}

main {
	display: flex;
	flex-direction: column;
	margin: var(--spacing-12) 0;
}

/* Button layout */
.buttons {
	display: grid;
	align-content: bottom;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-2);
	padding: var(--spacing-2);
	margin-top: var(--spacing-12);
}

button {
	background-color: var(--button-bg);
	color: var(--button-fg);
	border: var(--button-border);
	border-radius: var(--spacing-2);
	padding: var(--spacing-3) var(--spacing-4);
	font-size: 1.2rem;
	text-transform: uppercase;
	box-shadow: var(--shadow-md);

	&:hover {
		background-color: var(--button-hover-bg);
		color: var(--button-hover-fg);
	}

	&[disabled] {
		background-color: var(--button-disabled-bg);
		color: var(--button-disabled-fg);
		border: var(--button-disabled-border);
	}
}

/* Components */
.timer {
	text-align: center;
	margin: var(--spacing-8);
	font-weight: bold;
	font-size: 1.2rem;
	flex-grow: 2;
}


/* Mambo board */
.board {
	display: grid;
	gap: var(--spacing-2);
	padding: var(--spacing-2);
	width: 100vw;

	&.grid-4 {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(4, 1fr);
	}
	&.grid-6 {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(6, 1fr);
	}
	&.grid-8 {
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(8, 1fr);
	}

	span {
		display: inline-block;
		padding: var(--spacing-2);
		border-radius: var(--spacing-3);
		border: 2px solid var(--secondary-fg);
		cursor: pointer;
		user-select: none;
		text-align: center;
		line-height: var(--spacing-4);
		aspect-ratio: 1;
		box-shadow: var(--shadow-sm);

		&:hover {
			border-color: var(--secondary-bg);
		}
	}
	span.green {
		background-color: var(--mambo-green);
		box-shadow: var(--shadow-lg);
	}
	span.blue {
		background-color: var(--mambo-blue);
		box-shadow: var(--shadow-lg);
	}
	span.error {
		outline: 2px solid var(--mambo-error);
	}
}