.new-comment-section {
	margin: 0 0 8px 40px;
	position: relative;
	.member {
		left: -40px;
		position: absolute;
	}
	form {
		.comment-frame {
			background-color: #fff;
			border-radius: 3px;
			box-shadow: 0 1px 2px -1px #091e4240, 0 0 0 1px #091e4214;
			margin: 4px 4px 12px 0;
			overflow: hidden;
			position: relative;
			transition: box-shadow 85ms ease;
			&.focused {
				box-shadow: 0 4px 8px -2px #091e4240, 0 0 0 1px #091e4214;
			}
			.comment-box {
				padding: 8px 12px;
				position: relative;
				transition-duration: 85ms;
				transition-property: padding-bottom;
				transition-timing-function: ease;
				&.focused {
					padding-bottom: 56px;
				}
				.comment-box-input {
					background: transparent;
					box-shadow: none;
					box-sizing: initial;
					height: 20px;
					margin: 0;
					min-height: 20px;
					padding: 0;
					resize: none;
					width: 100%;
					cursor: pointer;
					&.focused {
						cursor: text;
					}
				}
				.comment-controls {
					bottom: 8px;
					left: 12px;
					opacity: 0;
					position: absolute;
					transform: translateY(48px);
					transform: translateY(0);
					transition-duration: 85ms;
					transition-property: opacity, transform;
					transition-timing-function: ease;
					.save-btn {
						background-color: #091e420a;
						border: none;
						box-shadow: none;
						color: #a5adba;
						cursor: not-allowed;
						&.primary {
							cursor: pointer;
							background-color: #0079bf;
							border: none;
							box-shadow: none;
							color: #fff;
							margin-bottom: 0;
							margin-top: 0;
						}
					}
					.cancel-btn {
						&::before {
							content: '\e91c';
						}
					}
				}
			}
		}
	}
}

.comment-container {
	margin-left: 40px;
	min-height: 32px;
	padding: 8px 0;
	position: relative;
	.comment-creator {
		height: 32px;
		left: -40px;
		position: absolute;
		top: 8px;
		width: 32px;
	}
	.comment-desc {
		word-wrap: break-word;
		margin: 0;
		.comment-content {
			.action-comment {
				cursor: auto;
				background-color: #fff;
				border-radius: 3px;
				box-shadow: 0 1px 2px -1px #091e4240, 0 0 0 1px #091e4214;
				box-sizing: border-box;
				clear: both;
				display: inline-block;
				margin: 4px 2px 4px 0;
				min-width: 100%;
				max-width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				.current-comment {
					padding: 8px 12px;
					p {
						margin-bottom: 0;
						word-wrap: break-word;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
	.comment-actions {
		a {
			font-size: 12px;
			text-decoration: underline;
		}
	}
}
