// ------------------------------------
// Composer

.composer-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: @zindex-navbar-fixed;
	pointer-events: none;
	.transition(left 0.2s);

	.with-pane & {
		left: @index-pane-width;
	}
}
.composer {
	pointer-events: auto;
	margin-left: -20px;
	margin-right: 180px;
	.box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
	border-radius: 4px 4px 0 0;
	background: rgba(255, 255, 255, 0.9);
	transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
	position: relative;
	.transition(~"margin-left 0.2s, margin-right 0.2s, background 0.2s");

	.index-index & {
		margin-left: 205px;
		margin-right: -20px;
	}
	&.active {
		background: #fff;
	}
	&.minimized {
		height: 50px;
		cursor: pointer;
	}
}
.composer-content {
	padding: 20px 20px 15px;

	.minimized & {
		padding: 10px 20px;
	}
}
.composer-handle {
	height: 20px;
	margin-bottom: -20px;
	cursor: row-resize;
	position: relative;

	.minimized & {
		display: none;
	}
}
.composer-controls {
	position: absolute;
	right: 10px;
	top: 10px;
}
.composer-avatar {
	float: left;
	.avatar-size(64px);

	.minimized & {
		display: none;
	}
}
.composer-body {
	margin-left: 90px;
	
	& h3 {
		margin: 5px 0 10px;
		color: @fl-body-muted-color;
		font-size: 16px;
		font-weight: normal;
	}

	.minimized & {
		margin-left: 0;
	}
}
.composer-editor {
	& textarea {
		background: none;
		border-radius: 0;
		padding: 0;
		margin-bottom: 10px;
		height: 200px;
		border: 0;
		resize: none;
		color: @fl-body-color;
		font-size: 14px;
		line-height: 1.6;

		&:focus {
			background: none;
		}
	}

	.minimized & {
		visibility: hidden;
	}
}