:host {
	display: inline-block;
	--border-radius: 5px;
}

.sudoku {
	user-select: none;
	border: 1px solid #ccc;
	font-size: 13px;
	color: #222;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-auto-rows: auto;
	aspect-ratio: 1 / 1;
	background-color: #e5e5e5;
	border-radius: var(--border-radius);
	overflow: hidden;

	.sudoku-field {
		aspect-ratio: 1 / 1;
		width: 1em;
		line-height: 1;
		text-align: center;
		padding: 2px;
		border: 1px solid #ccc;
		border-left: none;
		border-top: none;

		/* Cross bars */
		&:nth-child(3n):not(:nth-child(9n)) {
			border-right-color: black;
		}
		&:nth-child(n + 19):nth-child(-n + 27),
		&:nth-child(n + 46):nth-child(-n + 54) {
			border-bottom-color: black;
		}

		/* Match the corners with parent, otherwise they'll render on top */
		&:nth-child(1) {
			border-top-left-radius: var(--border-radius);
		}
		&:nth-child(9) {
			border-top-right-radius: var(--border-radius);
		}
		&:nth-last-child(1) {
			border-bottom-right-radius: var(--border-radius);
		}
		&:nth-last-child(9) {
			border-bottom-left-radius: var(--border-radius);
		}

		&.initial {
			color: #777;
		}
		&.selected {
			background-color: lightgreen;
		}
		&.marked {
			background-color: blue;
		}
		&.invalid {
			color: red;
		}
	}
}