@import "_menu-control.scss";
@import "_menu-editor.scss";

.menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	container-type: inline-size;
	gap: 1rem;
}

.menu-back {
	text-align: center;
}

$control-gap: 1rem;
$min-control_size: 10rem;
$max-control_size: 15rem;

.menu-controls {
	display: grid;
    justify-content: center;
	grid-template-columns: repeat(var(--count, 8), minmax($min-control_size, $max-control_size));
	gap: $control-gap;
}

@mixin breakpoint($below, $cols) {
	@container (width < #{$min-control_size * $below + $control-gap * ($below - 1)}) {
		.menu-controls {
			grid-template-columns: repeat(min(var(--count, $cols), $cols), minmax(auto, $max-control_size));
		}
	}
}

@include breakpoint(8, 4);
@include breakpoint(4, 2);
@include breakpoint(2, 1);