/**
	* rules for app-navigation
	*/

#app-navigation {
	&:not(.vue) {
		> ul > li {
			> a {
				background-position: inherit;
			}
			> .app-navigation-entry-edit {
				padding-left: 5px !important;
			}
		}
		.app-navigation-entry-menu {
			ul {
				align-items: unset;
				li {
					width: auto !important;
				}
			}
		}
	}
	> ul {
		> li {
			background-image: unset;

			> a {
				background-image: unset;
				background-position: inherit;
			}

			.sprite::before {
				content: '';
				position: absolute;
				z-index: -1;
				width: 16px;
				height: 16px;
				background: var(--icon-tasks-bw-000) no-repeat;
				margin: 14px;
				margin-left: -30px;
				background-position: inherit;
			}

			&.active .app-navigation-entry-bullet {
				height: 16px;
				width: 16px;
				margin: 14px;
			}

			&.edit {
				> a,
				.app-navigation-entry-utils,
				.app-navigation-entry-menu {
					display: none;
				}

				.app-navigation-entry-edit.name {
					display: inline-block;
					position: relative;
				}
			}

			&.animate-up {
				display: none;
			}

			&.list:not(.active) {
				.app-navigation-entry-utils-menu-button,
				.calendar__share {
					display: none;
				}
			}

			&.list, &.collection {
				.task-item {
					display: none;
				}
			}

			.app-navigation-entry-edit {
				padding-left: 5px !important;

				&.name {
					display: none;
				}
			}

			.error input.edit {
				color: $red;
				border-color: $red !important;
				box-shadow: 0 0 6px rgba($red, .3);
			}
		}
	}

	.app-navigation-entry-edit {
		&.name input[type='text'] {
			width: calc(100% - 72px);
		}

		input.action {
			background-color: $gray_easy;
			width: 36px;
			border-left: 0 none;
			background-position: center;
			cursor: pointer;

			&:hover {
				border-left: 1px solid;
				margin-left: -1px;
				width: 37px;
			}
		}
	}

	.app-navigation-entry-utils li {
		font-size: 100%;
	}

	.app-navigation-entry-menu {
		ul {
			align-items: unset;
		}

		li {
			float: inherit;
			width: auto !important;
			cursor: pointer;
			height: 44px;

			/*
			 * rules for confirmation directive
			 */
			> a {
				&:not(:empty).confirmation-confirm {
					padding: 0 !important;
				}

				span.countdown {
					background-color: inherit;
					color: $white;
					display: block;
					text-align: center;
					filter: alpha(opacity=100) !important;
					opacity: 1 !important;
				}
			}

			&:hover a {
				opacity: 1 !important;
			}

			&.confirmed a {
				&.confirmation-confirm {
					display: inline-block !important;
					opacity: 1;
				}

				&.confirmation-abort {
					display: inline-block !important;
					opacity: 1;
				}
			}

			img {
				cursor: pointer;
				margin-right: 5px;
				vertical-align: text-bottom;
			}

			span {
				cursor: pointer;
			}

			button {
				float: inherit;
			}
		}
	}

	> ul ul.colorpicker-list {
		display: inline-flex;
	}
}

/**
	* rules for colorpicker
	*/

.colorpicker {
	display: block;
	height: 30px;
	height: auto;
	padding-bottom: 3px;
	padding-top: 3px;

	.colorpicker-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		text-align: center;
		justify-content: center;
		align-items: center;

		.color-selector-label {
			display: block;
			height: 24px;
			width: calc(100% / 9) !important;
			background-image: url('../img/color_picker.svg');
			background-repeat: no-repeat;
			background-position: center center;

			.color-selector {
				visibility: hidden;
			}
		}

		li {
			height: 24px;
			width: calc(100% / 9) !important;

			&.selected {
				border: 1px solid $gray_dark;
			}

			&.randomcolour {
				cursor: pointer;

				.icon-random {
					filter: invert(1);
					opacity: 1;
				}
			}
		}
	}
}

.confirmation-default {
	overflow: hidden;
}

.confirmed {
	.confirmation-default {
		display: none !important;
	}

	&.active {
		.confirmation-confirm {
			cursor: pointer !important;
		}

		.countdown {
			visibility: hidden;
		}
	}
}

.confirmation-abort {
	width: 50% !important;
	display: none !important;
	padding: 0 !important;
	background-position: center !important;
}

.confirmation-confirm {
	@extend .confirmation-abort;
	background-color: $red !important;
	cursor: default !important;
}

/**
	* rules for settings area
	*/

#app-settings-content {
	.icon {
		margin-top: -3px;
	}

	li {
		line-height: 3em;
		display: flex;
		height: 40px;

		label {
			white-space: nowrap;
			padding-right: 10px;
		}

		&.headline {
			font-weight: bold;
			line-height: 50px;
		}

		.label-container {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			float: left;
		}

		select {
			min-width: 105px;
			text-overflow: ellipsis;
			margin-left: auto;
		}
	}
}

#collection_today > a > span.date {
	position: absolute;
	font-size: 6px;
	left: 17px;
	top: 2px;
	width: 10px;
	text-align: center;
	font-weight: bold;
}

#app-settings .label-container span.icon {
	font-size: 7px;
	font-weight: bold;
	line-height: 21px;
	text-align: center;
}

/**
	* rules for app-content
	*/

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}

#content {
	color: $gray_dark;
}

#app-content {
	overflow-x: hidden;

	#add-task {
		margin: 12px 0;
		position: relative;
		border: 1px solid $gray_light;
		width: calc(100% - 56px);
		float: left;

		.icon {
			position: absolute;
			top: 6px;
		}

		input {
			font-size: 13px;
			width: 100%;
			color: $gray_dark;
			border: medium none !important;
			border-radius: 0 !important;
			box-shadow: none !important;
			padding: 0 60px 0 32px;
			margin: 0;
			cursor: text;
			outline: none;
			min-height: 32px;
		}
	}

	.content-wrapper {
		padding: 6px 17px 75px;
		box-sizing: border-box;
		height: 100%;
		overflow: hidden;

		.task-list {
			width: 100%;
			overflow-y: auto;

			.loadmore {
				font-size: 11px;
				margin-top: 10px;
				text-align: center;
				height: 21px;

				span {
					color: $gray;
					background-color: $gray_easy;
					border-radius: 10px;
					padding: 3px 6px;

					&:hover {
						cursor: pointer;
						color: $gray_dark;
					}
				}
			}

			.grouped-tasks {
				position: relative;
				padding-top: 2px;

				.task-item {
					cursor: default;
					list-style: none outside none;
					margin-top: -1px;

					&.done .task-body {
						opacity: .6;

						.title {
							text-decoration: line-through;
						}
					}

					&.add-subtask {
						border: 1px solid $gray_light;

						input {
							border: medium none !important;
							border-radius: 0 !important;
							box-shadow: none !important;
							box-sizing: border-box;
							color: $gray_dark;
							cursor: text;
							font-size: 100%;
							margin: 0;
							padding: 0 60px 0 32px;
							width: 100%;
							min-height: 36px;
						}
					}

					&.sortable-ghost .task-body {
						background-color: rgba( $color-primary, .3 );
					}

					.subtasks-container {
						margin-left: 37px;
					}

					.task-body {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						align-items: center;
						height: 37px;
						position: relative;
						border: 1px solid $gray_light;
						overflow: hidden;

						&:hover,
						&.active {
							background-color: $gray_easy;
							box-shadow: inset 4px 0 var(--color-primary);
						}

						.task-checkbox {
							padding: 8px;
							height: 37px;
							width: 37px;
							border-right: 1px dotted $gray;
							opacity: 0.5;
						}

						.task-info {
							display: flex;
							flex: 1 1 auto;
							cursor: pointer;
							color: $gray_dark;
							line-height: 16px;
							margin: 0;
							overflow: hidden;
							position: relative;
							text-overflow: ellipsis;
							white-space: nowrap;

							.title {
								cursor: text;
								display: inline-flex;
								padding: 10px;
								overflow: hidden;

								span {
									overflow: hidden;
									text-overflow: ellipsis;

									a {
										cursor: pointer;
										text-decoration: underline;
									}
								}
							}

							.categories-list {
								padding: 8px;
								overflow: hidden;

								.category {
									overflow: hidden;
									display: inline-flex;
									min-width: 45px;
									background-color: $gray_easy;
									border: 1px solid $gray_light;
									border-radius: 2px;
									margin: 0 4px;

									.category-label {
										color: $gray;
										font-weight: bold;
										padding: 2px 4px;
										text-overflow: ellipsis;
										overflow: hidden;
										white-space: nowrap;
										width: 100%;
										text-align: center;
									}
								}
							}

							.percentbar {
								height: 3px;
								position: absolute;
								bottom: 3px;
								left: 10px;
								right: 10px;
								background-color: $gray_light;
								border-radius: 2px;

								.percentdone {
									height: 3px;
									border-radius: 2px 0 0 2px;
									opacity: .75;
								}
							}
						}

						.task-body-icons {
							display: flex;
							max-width: 50%;
							justify-content: flex-end;
							overflow: hidden;

							&>div {
								height: 37px;
								padding: 10px;
								display: flex;
								flex-direction: row;
								align-items: center;
								flex-wrap: nowrap;
							}

							.icon {
								vertical-align: unset;

								&.icon-add {
									&:hover {
										opacity: 1;
									}
								}
							}

							.duedate {
								color: $blue_due;
								font-size: 11px;
								line-height: 14px;

								&.overdue {
									color: $red_overdue;
								}
							}

							.calendar {
								color: $gray;
								font-size: 11px;
								line-height: 14px;
								white-space: nowrap;

								.calendar-indicator {
									position: relative;
									display: inline-block;
									margin-right: 3px;
									width: 8px;
									height: 8px;
									border: none;
									border-radius: 50%;
									cursor: pointer
								}
								.calendar-name {
									max-width: 200px;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}
						}
					}
				}
			}
		}
	}

	h2 {
		font-weight: bold;
		font-size: 13px;
		margin-bottom: 10px;
		margin-top: 20px !important;
		word-wrap: break-word;
		opacity: .5;

		&:hover {
			opacity: .7;
		}

		&.heading-hiddentasks {
			display: inline-block;
			padding-right: 16px;
			background-position: right center;
			cursor: pointer;
		}
	}
}

/**
	* rules for app-sidebar
	*/

#app-sidebar {
	.flex-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.content-wrapper {
		padding: 0;
		box-sizing: border-box;
		height: 100%;
		overflow: hidden;

		.notice {
			color: $gray;
			font-size: 16px;
			position: absolute;
			text-align: center;
			top: 50%;
			width: 100%;
		}

		.footer {
			border-top: 1px solid $gray_light;
			flex: 0 0 auto;
			height: 30px;
			display: flex;
			justify-content: space-between;

			a {
				padding: 7px;

				&.info {
					cursor: default;
				}

				.icon {
					display: block;
				}
			}
		}

		.title {
			flex: 0 0 auto;
			background-color: $gray_easy;
			border-bottom: 1px solid $gray_light;
			font-size: 16px;
			font-weight: bold;
			min-height: 50px;
			word-wrap: break-word;

			&.editing {
				.title-text {
					display: none !important;
				}

				.expandable-container {
					display: inline-block !important;
				}
			}

			.status-display {
				float: right;
				margin: 17px 0;
			}

			.title-text {
				cursor: text;
				display: inline-block;
				min-height: 24px;
				margin: 13px 0;
				width: calc(100% - 116px);
				padding: 0 6px;
				line-height: 22px;
				// this border is to adjust the size of the div to the size
				// of the input field for editing the title
				// (setting a padding always led to a small flickering)
				border: 1px solid transparent;

				&.strike-through {
					text-decoration: line-through;
				}

				a {
					cursor: pointer;
					text-decoration: underline;
				}
			}

			.expandable-container {
				border: 1px solid $gray;
				padding: 0 6px;
				display: none !important;
				margin: 13px 0;
				width: calc(100% - 116px);
				line-height: 24px;
				min-height: 24px;

				.expandingArea {
					position: relative;
				}
			}

			.checkbox {
				float: left;
				padding: 16px 17px 18px;

				.icon {
					cursor: pointer;
					margin: 0;
				}
			}

			.star {
				padding: 13px 13px 13px 8px;
				float: right;

				.icon {
					height: 24px;
					width: 24px;
					&.icon-color {
						background-size: 96px 72px;
					}

					&.icon-bw {
						background-size: 120px 120px;
					}
				}
			}

			textarea,
			pre {
				box-shadow: none;
				font-size: 16px;
				font-weight: bold;
				line-height: 22px;
				min-height: 22px;
				background: none repeat scroll 0 0 transparent;
				border: medium none;
				padding: 0;
				white-space: pre-wrap;
				word-wrap: break-word;
			}

			textarea {
				margin: 0;
				border-radius: 0;
				height: 100%;
				left: 0;
				overflow: hidden;
				position: absolute;
				resize: none;
				top: 0;
				width: 100%;
			}

			pre {
				border: 0 none !important;
				display: block;
				margin: 0;
				outline: 0 none;
				padding: 0 !important;
				visibility: hidden;
			}
		}

		.body {
			flex: 1 1 auto;
			overflow-y: auto;
			position: relative;

			.section {
				border-bottom: 1px dotted var(--color-text-lighter);
				padding: 0;
				position: relative;
				margin-bottom: 0;
				width: 100%;
				color: var(--color-text-lighter);

				&:last-of-type {
					border-bottom: unset;
				}

				&.low,
				&.date {
					color: $blue_due;
				}

				&.high {
					color: $red_overdue;
				}

				&.medium {
					color: $yellow;
				}

				&.date:hover .icon.icon-trash {
					display: block;
				}

				&.date .icon {
					&.icon-calendar-due,
					&.icon-calendar-overdue,
					&.icon-percent,
					&.icon-percent-active {
						opacity: 1;
					}
				}

				&.detail-note {
					padding: 20px 0;
					height: auto;
				}

				&.detail-all-day {
					div,
					span {
						cursor: pointer;
					}
					input[type='checkbox'].checkbox + label {
						&::before {
							margin-left: 0;
						}
						>span {
							font-weight: bold;
							margin-left: 10px;
						}
					}
				}

				&.editing {
					.icon {
						&.detail-save,
						&.icon-trash {
							display: block;
						}
					}

					.section-title {
						display: none;
					}

					.section-edit {
						display: inline-block;
					}
				}

				.icon {
					&.icon-trash {
						display: none;
						margin-left: auto;
						right: 22px;
					}

					&.icon-privacy {
						opacity: 1;
						cursor: unset;
					}

					&.detail-save {
						display: none;
						margin-left: auto;
						right: 44px;
					}
				}

				> div {
					padding-left: 12px;
					line-height: 44px;

					&.utils {
						position: absolute;
						right: 0;
						top: 0;
						padding-right: 15px;

						a {
							vertical-align: middle;
							display: inline-block;
						}
					}

					.section-title {
						font-weight: bold;
						margin-left: 12px;
						line-height: 22px;
						width: calc(100% - 100px);
						display: inline-block;
						vertical-align: middle;
					}

					.icon {
						margin: 0;
						float: unset;
					}

					.calendar-indicator {
						position: relative;
						display: inline-block;
						width: 16px;
						height: 16px;
						border: none;
						border-radius: 50%;
						cursor: pointer;
						vertical-align: middle;
					}
				}

				input[type='range'] {
					border: medium none;
					box-shadow: none;
					width: calc(100% - 50px);
					vertical-align: middle;
				}

				input[type='number'] {
					background: none repeat scroll 0 0 $gray_easy;
					margin: 0;
					min-height: 0;
				}

				input {
					border-radius: 0;
					margin-top: 0;
					color: $gray_dark;
					font-weight: 500;
					outline: medium none;
					padding: 4px;

					&.duration-input {
						margin: 2px 0 0 .3em;
						width: 44px;
					}

					&.percent-input,
					&.priority-input {
						width: 44px;
						margin-top: 0;
					}
				}

				input::-webkit-outer-spin-button,
				input::-webkit-inner-spin-button {
					-webkit-appearance: none;
				}

				select {
					background-color: rgba(0, 0, 0, 0);
					border-radius: 0;
					border: 1px solid $gray_light;
					padding: 0;
					width: 98px;
					margin: 0;
					font-weight: normal;
					height: 19px;
				}

				.section-edit {
					display: none;
					padding-left: 12px;
					vertical-align: middle;
					width: calc(100% - 80px);
					line-height: 0;

					.mx-datepicker {
						&.date {
							width: 59%;
						}
						&.time {
							width: 40%
						}
					}
				}

				.detail-calendar-container .multiselect__single {
					color: $blue_due;
				}

				.detail-categories-container,
				.detail-calendar-container {
					width: calc(100% - 52px);
					display: inline-block;
					margin-left: 12px;

					.multiselect.multiselect-vue {
						width: 100%;
						margin: 1px -1px;
						vertical-align: middle;

						&.multiselect--disabled {
							background-color: var(--color-main-background) !important;
							cursor: default;
							.multiselect__single, input:not([type='range']):disabled {
								background-color: var(--color-main-background) !important;
								cursor: default;
							}
						}

						&.multiselect--active .multiselect__tags {
							border: 1px solid var(--color-border-dark);
						}

						.multiselect__tags {
							border: 1px solid transparent;

							.multiselect__tags-wrap {
								padding-left: 0px;
							}

							.multiselect__input {
								padding: 0px !important;
								font-weight: bold;
							}

							.multiselect__single {
								padding-left: 0px !important;
								font-weight: bold;
							}
						}

						.multiselect__tag {
							color: $blue_due;
							background: $gray_easy;
							font-weight: bold;
						}

						.multiselect__element {
							line-height: 1.3em;
						}
					}
				}

				.note {
					border-width: 1px;
					border-style: solid;
					border-color: $gray_light;
					font-size: 13px;
					line-height: 26px;
					margin: 0 20px;
					padding: 5px 15px;
					cursor: text;

					.expandingArea {
						position: relative;
						margin-left: -1px;

						textarea,
						pre {
							box-shadow: none;
							background: none repeat scroll 0 0 transparent;
							border: medium none;
							line-height: 26px;
							padding: 0;
							white-space: pre-wrap;
							word-wrap: break-word;
						}

						textarea {
							margin: 0 0 0 1px;
							border-radius: 0;
							height: 100%;
							left: 0;
							overflow: hidden;
							position: absolute;
							resize: none;
							top: 0;
							width: 100%;
							color: $gray_dark;
							font-weight: 500;
							outline: medium none;
						}

						pre {
							border: 0 none !important;
							display: block;
							margin: 0;
							outline: 0 none;
							padding: 0 !important;
							visibility: hidden;
						}
					}

					.note-body,
					.note-edit {
						min-height: 140px;
						word-wrap: break-word;
						cursor: text;

						.content-fakeable {
							&.editing {
								.display-view {
									display: none !important;
								}

								.edit-view {
									display: block !important;
								}
							}

							.display-view {
								cursor: text;
							}

							.edit-view {
								display: none !important;
							}
						}
					}
				}
			}
		}

		.disabled .body .section {
			> div {
				.calendar-indicator {
					cursor: default;
				}
			}

			&.detail-all-day {
				div,
				span {
					cursor: default;
				}
			}

			&.date:hover .icon.icon-trash {
				display: none;
			}
		}
	}
}

/**
	* rules for icons
	*/
.collection .icon {
	opacity: 1;
}

.disabled .icon.detail-star:hover {
	cursor: not-allowed;
}

.reactive {
	&:hover {
		.icon {
			opacity: .7;
		}
	}

	.icon {
		cursor: pointer;
	}
}

.detail-checkbox {
	float: left;
	padding: 8px;
	margin: 7px;
	margin-right: 3px;
	opacity: 0.5;
}

input[type='checkbox'].checkbox {
	&:checked + label::before {
		background-image: var(--icon-checkmark-000);
		background-color: unset;
		border-color: unset;
	}
	&:disabled + label::before {
		background-color: var(--color-background-darker) !important;
	}
	+ label::before {
		height: 14px;
		width: 14px;
	}
}

.icon {
	height: 16px;
	width: 16px;
	display: inline-block;
	vertical-align: middle;
	opacity: .5;
	transition: opacity 100ms ease 0s;
	cursor: default;

	&.reactive {
		cursor: pointer;

		&:hover {
			opacity: .7;
		}
	}

	&.disabled {
		cursor: not-allowed;
	}

	&.active {
		opacity: .7;
	}

	&.icon-checkmark,
	&.icon-tag-active,
	&[class*=' icon-task-star-'] {
		opacity: 1 !important;
	}

	&.right {
		float: right;
	}
}

/**
 * rules for sortorder-dropdown
 */

.sortorder-dropdown-button {
	background-color: $gray_easy;
	border: 1px solid $gray_light;
	width: 42px;
	height: 34px;
	margin: 12px 0 12px 12px;
	padding: 0;
	float: right;
	cursor: pointer;

	.sort-indicator {
		margin-left: 0;
		visibility: visible;
	}
}

.sortorder-dropdown {
	display: none;
	top: 68px;
	right: 3px;

	&.open {
		display: block;
	}

	.icon {
		margin: 14px 8px;

		&.sort-indicator {
			margin-left: auto;
			margin-right: 0;
			float: right;
			visibility: hidden;
		}
	}

	.label {
		margin-right: 10px;
	}

	.active .icon.sort-indicator {
		visibility: visible;
	}

	li {
		float: inherit;
		width: auto !important;
		cursor: pointer;
		opacity: .57;

		& > a span {
			opacity: 1 !important;

			&[class*=' icon-'] {
				padding: 0;
				background-size: auto;

				&.icon-list {
					@extend .icon-list;
				}

				&.icon-calendar {
					@extend .icon-calendar;
				}

				&.icon-task-star {
					@extend .icon-task-star;
				}

				&.icon-alphabetically {
					@extend .icon-alphabetically;
				}

				&.icon-manual {
					@extend .icon-manual;
				}

				&.icon-sort-up {
					@extend .icon-sort-up;
				}

				&.icon-sort-down {
					@extend .icon-sort-down;
				}
			}
		}

		a {
			width: 100% !important;
		}

		&.active {
			opacity: 1 !important;
		}

		&:hover {
			opacity: 1 !important;
		}
	}
}

.tooltip-arrow {
	width: unset !important;
}

.icon span{
	font-family: var(--font-face);
}

.status-display {
	display: inline-block;
	width: 16px;
	height: 16px;

	&.success {
		@extend .icon-color;
		@extend .icon-checkmark-color;
	}

	&.refresh {
		background-image: var(--icon-history-000);
		animation: pulse 2s infinite;
		border-radius: 50%;
		opacity: .5;
		cursor: pointer;

		&:hover{
			opacity: .7;
		}
	}
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(50, 50, 50, .4);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(50, 50, 50, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(50, 50, 50, 0);
	}
}

.delete-completed {
	margin: 50px;
	width: auto;
	min-width: 30vw;
	&__button {
		display: inline-block;
		padding: 10px;
		padding-left: 34px;
		background-position: 10px center;
		text-align: left;
		margin: 0;
		width: unset !important;
		height: unset !important;
		background-size: unset !important;
	}
	&__header {
		padding-top: 20px;
		max-width: 80%;
		margin: 12px auto;
	}
	&__progress {
		width: 80%;
		margin: auto;
	}
	&__tracker {
		display: flex;
		justify-content: space-between;
		width: 80%;
		margin: auto;
		padding-top: 10px;
	}
}
