/*
    Todo list
*/

.todo-list {
	height: 100%;
	.todo-list-header {
		padding: 20px;
		h5 {
			font-weight: 600;
			color: $additional-color-11;
			font-size: 20px;
			span.badge {
				padding: 5px 16px;
				font-size: 13px;
				background-image: linear-gradient(to right, #00b1f4 0%, #1a73e9 100%);
			}
		}
		i {
			vertical-align: $v-align-middle;
			font-size: 30px;
			cursor: pointer;
			color: $primary;
		}
	}
	.todo-list-body {
		.table {
			tbody {
				tr {
					td {
						border-color: $light-gray;
						padding: 14px 20px 14px 20px;
						vertical-align: $v-align-middle;
					}
				}
			}
		}
		.new-control.new-checkbox.checkbox-danger {
			.new-control-indicator {
				width: 1.2rem;
				height: 1.2rem;
				background-color: $color_none;
				border: $b-width-1 $solid $light-gray;
			}
			>input {
				&:checked~span.new-control-indicator {
					background-color: $dark;
					border: none;
				}
				&:checked~span.todo-text {
					text-decoration: line-through;
				}
				&:checked~.remove-task {
					color: $dark;
				}
			}
			span.todo-text {
				color: $color_76;
				font-size: 17px;
			}
		}
		.n-chk {
			.remove-task {
				font-size: 25px;
				color: $light-gray;
			}
		}
		.task-edit {
			font-size: 26px;
			vertical-align: $v-align-middle;
			margin-top: 3px;
			color: $light-gray;
		}
		table {
			tbody {
				tr {
					.task-edit {
						cursor: pointer;
					}
					&:hover {
						.task-edit {
							color: $danger;
						}
					}
				}
			}
		}
	}
	.todo-list-bottom {
		padding: 22px;
		border-top: $b-width-1 $solid $light-gray;
		span {
			font-weight: 600;
			font-size: 17px;
		}
		button {
			padding: 8px 46px;
			border: $b-width-2 $solid $primary !important;
			font-weight: 600;
			font-size: 16px;
		}
	}
}