@charset "UTF-8";
/* CSS Document */
$dark: #4D394B;
$darker: #2E222D;
$darkest: darken($darker, 5);

$primary: #4C9689;
$invalid: #e74c3c;
$valid: $primary;


body {
	width: 100vw;
	height: 100vh;
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	
	margin: 0;
	
	overflow: hidden;
	
	font-family: "Lato", sans-serif;
	
	background-color: $dark;
}

$border: 4px;

.sudoku-container {
	border: $border solid $darkest;
	margin: 0 auto;
	position: relative;
	padding: 0 2px;
	
	&::before, &::after {
		position: absolute;
		border-style: solid;
		pointer-events: none;
		content: "";
	}
	&::before {
		width: 156px;
		border-width: 0 4px;
		border-color: transparent $darkest transparent $darkest;
		top: $border;
		left: 160px;
		bottom: $border;
	}	
	&::after {
		height: 156px;
		border-width: 4px 0;
		border-color: $darkest transparent $darkest transparent;
		left: $border;
		top: 160px;
		right: $border;
	}	
}

tr:nth-child(1) td:nth-child(3) input,
tr:nth-child(1) td:nth-child(6) input {
    margin: 0 10px 0 0;
}

tr:nth-child(3) input,
tr:nth-child(6) input {
    margin: 0 0 10px 0;
}


.sudoku-container input {
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 20px;
	padding: 0;
	border: 3px $darker solid;
	background-color: $darker;
	color: #eee;
	
	&:focus {
		border-color: $primary;
	}
	
		&.highlight {
			background-color: #29B6F6;
			border-color: #29B6F6;	
		}
	
	&.disabled {
		cursor: not-allowed;
		background-color: $primary;
		border-color: $primary;
		
		&.highlight {
			background-color: #29B6F6;
			border-color: #29B6F6;	
		}
	}
}

.sudoku-container .invalid {
	border-color: $invalid;
	
	&:focus {
		border-color: $invalid;
	}	
}

.sudoku-container.valid-matrix {
	border-color: $valid;
}

#controls {
	margin: 20px 0;
}

.btn.primary {
	background-color: $primary;
	box-shadow: inset 0 -3px darken($primary, 10);
}