@import "../../../../core/config/theme.scss";



/* ----------------------------------------------
	Extension icon: stand-alone and in heading
   ---------------------------------------------- */
span.extIconComment {
	background:url('../img/exticon.png') no-repeat 0 0;
}

h1.extIconComment .title {
	background:url('../img/exticon.png') no-repeat 0 5px;
}


/* ------------------------
	Comment in ext list
   ------------------------ */
.extlist tr.comment:before {
	content:normal;
}



/* -----------------
	Sub menu
   ----------------- */
#navi-main-list-portal {
	li.itemFeedback {
		a {
			background: {
				image:url(../img/icons.png) !important;
				repeat:no-repeat;
				position:6px -356px;
			}
		}
	}
}


/* ------------------------
	Context menu task
   ------------------------ */
#contextmenu {
	.taskContextMenu.task-add-comment {
		background: {
			image:url(../img/icons.png);
			repeat:no-repeat;
			position:3px 3px;
		}
	}
}



/* --------------
	Search
   -------------- */
#todoyusearchheadletquicksearch-modes {
	li.searchmodeComment {
		a {
			background:url(../img/icons.png) no-repeat 3px -115px !important;
		}
	}
}
#todoyusearchheadletquicksearch {
	form.searchmodeComment {
		a.mode {
			background:url(../img/icons.png) no-repeat 3px -472px !important;
		}
	}
}



/* --------------------------
 	Portal tab feedback
   --------------------------*/
#portal-tab-feedback {
	span.icon {
		background:url(../img/icons.png) no-repeat 0 -356px;
	}
}


	// Tab icon
.taskTabs .tabs li.comment .icon {
	background:url(../img/icons.png) no-repeat 0 -112px;
}



/* --------------------------
 	Task tab
   --------------------------*/
.tabContent {
	.tab.comment {
		background:$colorNeutral00;
		margin:0;
		border:0;
		padding:0;

		.commentButtons {
			padding:5px;
			background:$colorNeutral00;

			.addComment {
				.icon {
					background:url(../img/icons.png) no-repeat 3px 4px;
					width:21px;
				}
			}
		}
	}
}


/* --------------------------
 	Comment list
   --------------------------*/
.commentList {
	display:block;
	position:relative;
	padding:5px 0;
	margin:30px 0;

	.fElement {
		&.typeRTE  {
			.fField {
				width: 400px;
			}
		}
	}

	/*vertical line */
	&:before {
		width:3px;
		top: -20px;
		bottom: -20px;
		background:$colorNeutral03;
		z-index:2;
	}

	&:before,
	.comment:before,
	.comment .text:before {
		content:"";
		position:absolute;
		top:0;
		left:125px;
		z-index:2;
	}

	/* only last element should not have a border*/
	div:nth-last-child(1) {
		border-bottom:0px;
	}

	.comment {
		position:relative;
		padding:0 4px;

				/* circle */
		&:before {
			background:$colorNeutral03;
			border-radius:100px;
			border:3px solid #fff;
			box-shadow:0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
			height:9px;
			margin:32px 0 0 -6px;
			width:9px;
			z-index:2;
		}
			/* no circle under the star */
		&.withFeedback:before {
			visibility:hidden;
		}

		&.ownComment {}

		&.isPublic .text {
			border:solid 1px $colorAlert01 !important;

			&:before {
				border-color:$colorAlert01 !important;
			}
		}

		.commentBackground {
			overflow:hidden;
			padding:2em 0 1em;
			border-bottom:1px solid $colorNeutral02;
			zoom:1;
		}


		.personApproval {
			display:block;
			height:20px;
			width:20px;
			background:transparent url('../../../../core/asset/img/icons.png') no-repeat 0 -1258px;
			position:absolute;
			top:30px;
			left:118px;
			z-index:2;

			&.isseen {
				background-position:0 -1400px!important;
			}
		}


		 /* -----------------------------------------------------------
			Person and meta information
		 ----------------------------------------------------------- */
		.comment-meta {
			width:160px;
			float:left;

			p {
				line-height:15px;
				padding:0 0 0 0;
				width:118px;
				max-width:118px;
			}

			.comment-img {
				border-radius:5px;
				overflow:hidden;
				width:75px;
				height:75px;
				margin:0 0 10px 5px;

				img {
					display:block;
				}
			}

			.quickInfoPerson {
				font-weight:bold;
			}
		}


		 /* -----------------------------------------------------------
			Comment Text
		 ----------------------------------------------------------- */
		.comment-body {
			overflow:hidden;
			width:600px;

			.text {
				background:$white;
				border-radius:5px;
				border:1px solid $colorNeutral01;
				padding:10px 5px 5px 12px;

				ul {
					list-style:disc outside;
					padding-left:14px;
				}

				ol {
					padding-left:17px;
				}

				a {
					text-decoration:underline !important;
				}
				a:hover {
					background-color:$colorNeutral01;
				}

				p:last-child {
					margin:0;
				}

				&:before {
					top:35px !important;
					left:160px !important;
					width:9px;
					height:9px;
					border-width:0 0 1px 1px;
					border-style:solid;
					border-color:$colorNeutral01;
					background:$white;
					-webkit-transform:rotate(45deg);
					-ms-transform:rotate(45deg);
					transform:rotate(45deg);
				}
			}

			.updateInfo,
			.commentId		 {
				color:$colorNeutral06;
				text-align:right;
			}

			.updateInfo,
			.involvedPersons,
			.additionalContent,
			.action-bar,
			.assets	 {
				padding:5px 0 ;
				border-bottom:1px solid #eeeeee;
				clear:both;
			}

			.action-bar {
				.commentId {
					padding:0 0 0 20px;
				}
			}


			/* -----------------------------------------------------------
				Assets
			 ----------------------------------------------------------- */
			.assets {
				ul {
					list-style:disc inside;
				}
				h6 {
					margin:0 0 0 0;
				}

				a {
					text-decoration:underline;
					cursor:pointer;
				}
				a:hover {
					background:$colorNeutral02;
				}

			}

			.actions {
				a {
					width:22px;

					&.makePublic {
						background:url(../../../../core/asset/img/icons.png) no-repeat 0 -1079px;
						width:22px !important;
						opacity:0.3;

						&.isPublic {
							background:url(../../../../core/asset/img/icons.png) no-repeat 0 -1079px;
							opacity:1;
						}
					}
					&.edit {
						background:url(../../../../core/asset/img/icons.png) no-repeat 0 -746px;
					}
					&.remove {
						background:url(../../../../core/asset/img/icons.png) no-repeat 0 -330px;
					}
					&.quote {
						background:url(../img/icons.png) no-repeat 0 -538px;
					}
					&.mailReply {
						background:url(../img/icons.png) no-repeat 0 -508px;
					}
				}

				a:hover {
					background-color:transparent;
				}
			}

		}

		/* -----------------------------------------------------------
			Feedback and email receiver persons in comment header
		   ----------------------------------------------------------- */
		.involvedPersons {

			.involvedPerson {
				margin-right:10px;
				display:inline-block;

				span {
					vertical-align:top;
				}

				.icon {
					display:inline-block;
					float:none;
					height:14px;
					width:12px;
					background: {
						image:url(../../../../core/asset/img/icons.png);
						repeat:no-repeat;
					}
				}

				.feedback {
					&.approved {
						background-position:1px -1377px;
					}
					&.unapproved {
						background-position:1px -1288px;
					}
				}

				.email {
					background-position:1px -1344px;
				}
			}
		}
	}
}



/* ------------------------
	Comment form
   ------------------------ */
.task {
	.formComment {
		padding:0;
		background:none;

		fieldset {
			margin-top:5px;
			border-color:$colorCorporate02;
		}

		fieldset.main {
			padding-bottom:0;
			padding-top:10px;
			margin-bottom:0;
		}

		fieldset.email {
			padding-top:0;
			margin-top:0;
		}

		.fElement.typeRecords {
			&.recordsSelectAsset {
				.recordIcon {
					background:url(../img/icons.png) no-repeat 0px -509px;
				}
			}
		}
	}
}