* {
	font-family: "PT Sans", sans-serif;
}

header {
	text-align: center;
	background-color: red;
}

section {
	background-color: orange;

	ul {
		padding-left: 0;
		list-style-type: none;
		margin-bottom: 0;
	}

	li {
		--padding-left: 0;
		display: flex;
		align-items: center;
		position: relative;
		touch-action: none; /* We'll need to shrink list objects to keep a minimum scrollable area*/
		background-color: green;

		/* Unsure why this isn't applying the grabbing mouse.... ~~~~~~~ */
		&.dragging {
			background-color: white;
			cursor: grabbing;
			cursor: -moz-grabbing;
			cursor: -webkit-grabbing;
			opacity: 20%;
		}

		&.active {
			background-color: yellow;
		}

		&.dragover {
			background: linear-gradient(to right, green 70%, red 30%);
		}

		p {
			margin: 0;
			cursor: text;
		}

		&.sub {
			opacity: 100% !important;
			padding-left: calc(var(--padding-left) * 1em);
		}

		/* Using a custom checkbox type instead of input because I can't find a reasonable way to style an input */
		/* Need to fix wrapping text lines shrinking the checkbox ~~~~~~~ */
		.checkbox {
			width: 1em;
			aspect-ratio: 1/1;
			margin: 0 0.25em 0 0.25em;
			position: relative;
			background-color: red;
			cursor: pointer;

			&:hover {
				background-color: green;
			}

			&[data-state="true"] {
				background-color: blue;
				&::after {
					top: 5%;
					left: 25%;
					position: absolute;
					content: "";
					width: 30%;
					aspect-ratio: 1/2;
					border: solid white;
					border-width: 0 3px 3px 0;
					transform: rotate(45deg);
				}

				&:hover {
					background-color: green;
				}
			}

			&.disabled {
				background-color: grey;
				cursor: default;
			}
		}

		input[type="text"] {
			background-color: transparent;
			border: dotted grey;
			border-width: 0px 0 1px 0;

			&:focus {
				outline: none;
				border-color: white;
			}

			&:focus ~ #addCheckbox {
				display: block;
			}
		}

		#addCheckbox {
			width: 1em;
			aspect-ratio: 1/1;
			background-color: indigo;
			position: relative;
			cursor: pointer;
			margin-left: 0.5em;
			display: none;

			&::after {
				position: absolute;
				width: 1em;
				height: 1em;
				color: white;
				content: ">";
				display: flex;
				justify-content: center;
				align-items: center;
			}

			&:active {
				background-color: blue;
				display: block;
			}
		}

		span.trash {
			margin-left: auto;
			cursor: pointer;

			&:hover {
				filter: brightness(150%);
			}
		}

		span.handle {
			color: white;
			cursor: move;
			cursor: grab;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			margin-left: auto;
			margin-right: 0.5em;

			&:hover {
				opacity: 75%;
			}

			&:active {
				cursor: grabbing;
				cursor: -moz-grabbing;
				cursor: -webkit-grabbing;
			}
		}

		.trash + .handle {
			margin: 0 0.5em;
		}
	}

	#buttonContainer {
		display: flex;
		flex-direction: row;

		span + span {
			margin-left: 1em;
		}
		
		span {
			display: flex;
			flex-direction: row;
			align-items: center;

			#addCheckboxButton {
				width: 1em;
				aspect-ratio: 1/1;
				margin: 0 0.25em 0 0.25em;
				position: relative;
				background-color: red;
				cursor: pointer;
				color: white;

				&::after {
					content: "+";
					position: absolute;
					width: 1em;
					height: 1em;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&:hover {
					background-color: green;
				}

				&:active {
					background-color: blue;
				}
			}
		}
	}
}

footer {
	text-align: center;
	background-color: gold;

	h4 {
		margin-bottom: 0;
	}
}