//  =================
//      Imports
//  =================

@import '../../../assets/base/color_variables';    // Color Variables
@import '../../../assets/base/fonticons';              // Fonticons Variables
@import '../../../assets/base/urls';                   // URLS Variables
@import '../../../assets/base/utilities_variables';  // Utilities Variables

/* Style the list items */
.modern-todo {
	ul#todo-items-container {
		li.todo-item {
			cursor: pointer;
			position: $pos-rel;
			padding: 12px 8px 12px $p-40;
			list-style-type: none;
			background: $white;
			color: $additional-color-11;
			font-size: 18px;
			transition: 0.2s;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			/* Set all odd list items to a different color (zebra-stripes) */
			&:nth-child(odd) {
				background: $color_128;
				color: $additional-color-11;
			}
			/* Darker background-color on hover */
			&:hover {
				background: $color_54;
			}
		}
		/* When clicked on, add a background color and strike out text */
		li.checked {
			background: $white;
			color: $color_56;
			text-decoration: line-through;
			/* Add a "checked" mark when clicked on */
			&::before {
				content: '';
				position: $pos-abs;
				border-color: $color_74;
				border-style: $solid;
				border-width: $b-width-0 $b-width-2 $b-width-2 $b-width-0;
				top: 16px;
				left: 16px;
				transform: $rotate-45deg;
				height: 15px;
				width: 7px;
			}
		}
	}
	/* Style the close button */
	.close {
		position: $pos-abs;
		right: 0;
		top: 0;
		padding: 12px 16px 12px 16px;
		&:hover {
			color: $additional-color-11;
		}
	}
	/* Style the header */
	.header {
		background-color: $color_47;
		padding: 30px 15px;
		color: $white;
		text-align: $align-center;
		/* Clear floats after the header */
		&:after {
			content: "";
			display: table;
			clear: both;
		}
	}
	/* Style the input */
	input {
		border: none;
		width: 75%;
		padding: $p-10;
		float: $align-left;
		font-size: 16px;
	}
	/* Style the "Add" button */
	.addBtn {
		padding: $p-10;
		float: $align-left;
		text-align: $align-center;
		font-size: 16px;
		cursor: pointer;
		transition: 0.3s;
		&:hover {
			background-color: $color_6;
		}
	}
}
.close {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	color: $additional-color-6;
	text-shadow: none;
	opacity: 1;
}