@import "../assets/styles/bootstrap/variables";


.content-editable{
	// overflow: hidden !important;
	position: absolute !important;
	left: 0px !important;
	right: 0px !important;
	bottom: 0 !important;
	top: 0 !important;
	outline: 0 !important;
	line-height: 1.8 !important;
	padding: 6px !important;
	border: none;
	width: 100% !important;
}

.form-group-sm{
	.content-editable{
		padding: 0px !important;
		line-height: 1.4 !important;
	}
}

.mention-field{
	width: 100%;
	position: relative;
	height: 100%;

	&.form-control{
		line-height: 1.8;
		padding: 0;
		z-index: 2;

		&.typing{
			z-index: 3;
		}

		.mention-input {
			height: 100%;
		}

		.mention-input__input{
			@extend .content-editable;
			z-index: 1;
		}

		.mention-input__highlighter{
			@extend .content-editable;
		}

		.mention-mention{
			background: lighten($brand-primary, 25%);
			border-radius: 3px;
			margin-left: -1px;
			padding-left: 1px;
			margin-right: -1px;
			padding-right: 1px;
		}

		.mention-input__suggestions{
			border-radius: 3px;
			box-shadow: 0 2px 2px #e2e2e2;
			background: lighten($brand-primary, 25%) !important;
			margin-top: 24px !important;
			margin-left: -20px;

			&:before{
				content: "";
				display: block;
				position: absolute;
				border-style: solid;
				border-width: 0 7px 7px 7px;
				border-color: transparent transparent #b1d2f3 transparent;
				margin-top: -7px;
				margin-left: 17px;

			}

			ul li{

				.mention-input__suggestions__item__display{
					padding: 2px;
					border-bottom: 1px solid #8eacca;
					padding-left: 5px;
					padding-right: 5px;
					font-weight: 200;
					display: block;
				}

				&:last-child{
					.mention-input__suggestions__item__display{
						border-bottom: none;
						border-bottom-left-radius: 3px;
						border-bottom-right-radius: 3px;
					}
				}

				&:first-child{
					.mention-input__suggestions__item__display{
						border-top-left-radius: 3px;
						border-top-right-radius: 3px;
					}
				}
			}
		}

		.mention-input__suggestions__item--focused{
			.mention-input__suggestions__item__display{
				background: #8eacca;
				color: white;
			}
		}
	}
}