/** Point structure */
.points {
	background: rgba(0,0,0,.05);
	padding: 0.4em 0.4em 0.4em;
}
.points .point {
	margin: 0.2em 0;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.1);
	background: #fff;

	&:hover {
		.wpeo-sort-point, .wpeo-task-setting .wpeo-task-open-action > i, .action-delete {
			opacity: 1 !important;
		}
	}
}

/** Points */
.points .point .point-container {
	display: flex;
	flex-direction: row;
	padding: 0.6em 0;

	/** Check */
	.point-valid {
		margin: auto 0;
		padding-left: 0.2em;
		display: flex;
		flex-direction: row;

		.wpeo-sort-point {
			color: rgba(0,0,0,0.4);
			transition: all 0.2s ease-out;
			opacity: 0;
			display: flex;

			&:hover {
				cursor: pointer;
				color: rgba(0,0,0,0.8);
			}
		}

		.completed-point {
			margin-left: 4px;
			background: #fff !important;
			border-radius: 3px;
		}
	}

	/** Content */
	.point-content {
		width: 100%;
		max-width: 90%;
		margin: auto 0;
		padding: 0 1em;

		.wpeo-point-summary {
			display: flex;
			flex-direction: row;

			li {
				padding: 4px;
				font-size: 12px;
				color: rgba(0,0,0,0.4);
				line-height: 1;
			}
			[data-icon] {
				color: rgba(0,0,0,0.6);
			}
		}

		.wpeo-point-new-contenteditable {
			min-height: 20px;
			transition: all 0.2s ease-out;
			font-family: 'Roboto Slab', 'Open sans', serif;
			width: 100%;
			font-size: 14px;
			line-height: 1.5;
		}
		.wpeo-point-new-placeholder {
			color: rgba(0,0,0,0.4);
			position: absolute;
			left: 0em;
			top: 0em;
			pointer-events: none;
			font-family: 'Roboto Slab', 'Open sans', serif;
			font-style: italic;

			[data-icon] {
				margin-right: 0.4em;
			}
		}
	}

	/** Settings */
	.point-action {
		margin: auto 0 auto auto;
		min-width: 10%;
	}
}

/** Nouveau point */
.points .point.new .point-container {
	padding: 1.4em 1.4em 1.4em 3.4em;

	.point-content {
		padding: 0;
	}
	.point-action {
		.wpeo-point-new-btn {
			background: $color__primary;
			border-color: $color__primary;
			color: #fff;
			width: 20px;
			height: 20px;
			line-height: 12px;
		}
	}
}

/** Point en édition */
.points .point.edit .point-container {

}

.points {
	.point-container {

		.point-content {
			.wpeo-point-new-contenteditable {
				margin: auto 0;
			}
		}

		.point-action {
			margin-right: auto;
			display: flex;
			flex-direction: row;
			.wpeo-point-time,  .wpeo-task-setting, .action-delete {
				margin: auto 0;
			}
			.wpeo-point-time {
				display: flex;
				flex-direction: row;
				width: 50%;
				.dashicons-clock {
					margin-right: 4px;
				}
				span {
					margin: auto 0;
				}
			}
			.wpeo-task-setting {
				margin-left: auto;
				text-align: center;
				transition: all 0.2s ease-out;
				.wpeo-task-open-action > i {
					min-width: 20px;
					font-size: 14px;
					line-height: 20px;
					border-radius: 50%;
					transition: all 0.2s ease-out;
					opacity: 0;
					color: rgba(0,0,0,.2);
				}
				&:hover {
					cursor: pointer;
					.wpeo-task-open-action > i {
						color: rgba(0,0,0,.4);
					}
				}
			}
			.wpeo-point-new-btn {
				margin: auto 0 auto auto;
				transition: all 0.2s ease-out;
				&:hover {
					cursor: pointer;
				}
			}
		}

	}
}

@import "completed";
@import "quick-point";