//
// Welcome to the CSS encoding of the Cellular Automaton Rule 190!
// Learn about Cellular Automata here: 
// https://notlaura.com/is-css-turing-complete/
// 

// Store custom property definitions in mixins for easier updating. 
// (we'll be able to do this in CSS soon enough!)
@mixin zero {
	--cell-bg-color: white;
	--cell-num-color: black;
	--cell-content: "0";
}

@mixin one {
	--cell-bg-color: hotpink;
	--cell-num-color: white;
	--cell-content: "X";
	--cell-cursor: pointer;
}

// Number of *s should be: var( --cells-per-row ) - 1. 
// This means go to one cell before the one right below the current target.
$selector: "* + * + * + * + * + * + * + * + * + * + * + *";

//
// Rule 190 Encoding:
// 111 110 101 100 011 010 001 000
//  1   0   1   1   1   1   1   0
//

// 111
input:checked + input:checked + input:checked 
+ #{$selector} {
	@include one;
}

// 110
input:checked + input:checked + input:not(:checked) 
+ #{$selector} {
	@include zero;
}

// 101
input:checked + input:not(:checked) + input:checked 
+ #{$selector} {
	@include one;
}

// 100
input:checked + input:not(:checked) + input:not(:checked) 
+ #{$selector} {
	@include one;
}

// 011
input:not(:checked) + input:checked + input:checked 
+ #{$selector} {
	@include one;
}

// 010
input:not(:checked) + input:checked + input:not(:checked) 
+ #{$selector} {
	@include one;
}

// 001
input:not(:checked) + input:not(:checked) + input:checked 
+ #{$selector} {
	@include one;
}

// 000
input:not(:checked) + input:not(:checked) + input:not(:checked)
+ #{$selector} {
	@include zero;
}





//
// UI setup - not relevant to the CA logic.
//

// Set up the custom properties
:root {
	--cell-content: "";
	--cell-bg-color: white;
	--cell-num-color: black;
	--cell-cursor: initial;
	
	--cell-size: 40px;
	--cells-per-row: 13;
}

// Configuration previous row checked items.
input:checked::before {
	--cell-bg-color: black;
	--cell-cursor: initial;
	--cell-num-color: white;
	--cell-content: "1";
}

input:not(:checked) {
	@include zero;
}

// Scaffold number indicator pattern
input::before {
	width: 100%;
	height: 100%;
	position: absolute;
	display: grid;
	place-content: center;
	background-color: var( --cell-bg-color );
	color: var( --cell-num-color );
	content: var( --cell-content );
	cursor: var( --cell-cursor );
}

.automaton {
	display: flex;
	flex-wrap: wrap;
	width: calc( var( --cell-size) * var( --cells-per-row ) );
}

input {
	-webkit-appearance: none;	
	border: 1px solid black;
	height: var( --cell-size );
	width: var( --cell-size );
	font-size: 1rem;
	margin: 0;
	position: relative;
}


// Indicate starting cell with an X

input:nth-child(7) {
	border: 4px solid hotpink;
}

input:nth-child(7):checked {
	border: unset;
}

input:nth-child(7)::before {
	content: "X";
	cursor: pointer;
}

input:nth-child(7):checked::before {
	content: "1";
}


// Utilities

.u-margin-top {
	margin-top: 2rem;
}