/* Controls for visitors without JavaScript. An inline script puts the
   class "js" on <html> before the page paints, which hides them, so with
   JavaScript on the page is TodoMVC's own. */
.js .nojs {
	display: none !important;
}

/* The toggle buttons lie, invisible, over the circle and the chevron they
   stand for, so the page looks the same either way. */
.todo-list li .toggle-button,
.toggle-all-button {
	position: absolute;
	z-index: 1;
	font-size: 0;
	color: transparent;
	cursor: pointer;
}

.todo-list li .toggle-button {
	top: 0;
	bottom: 0;
	left: 0;
	width: 50px;
}

.toggle-all-button {
	top: -65px;
	left: 0;
	width: 45px;
	height: 65px;
}

.todo-list li .toggle-button:focus-visible,
.toggle-all-button:focus-visible {
	outline: 2px solid #b83f45;
	outline-offset: -6px;
}

/* Without double-click, each item gets an Edit link beside the delete
   button. */
html:not(.js) .todo-list li label {
	padding-right: 100px;
}

.todo-list li .edit-link {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 55px;
	height: 20px;
	margin: auto 0;
	font-size: 14px;
	line-height: 20px;
	color: #949494;
	text-decoration: none;
}

.todo-list li .edit-link:hover,
.todo-list li .edit-link:focus {
	color: #484848;
	text-decoration: underline;
}