#code-editor-wrapper {
	height: 30px;
	z-index: 21;
	position: absolute;
	width: 100%;
	bottom: 0;
	.transition(height 0.3s ease-in-out);

	#new-library-modal {
		margin-top: 5%;
	}

	&.open {
		display: block;
		height: 45%;
	}

	&.expanded {
		display: block;
		height: 100%;
	}

	> .code-editor {
		height: 95%;
		height: ~"calc(100% - 30px)";
		height: ~"-webkit-calc(100% - 30px)";
		font-size: 15px;
		width: 100%;

		#jscript-code-editor {
			font-size: 15px;
		}

		> .editor-column, .libraries-column {
			height: 100%;
		}

		> .libraries-column {
			background-color: @panel-background;
			color: @panel-color;
			padding: 0;

			> .body {
				height: 100%;
				overflow: auto;
				padding: 0 15px 15px 15px;

				> .form-control {
					border-radius: 0;
					background-color: @panel-box-background;
					border: @panel-border;
					.placeholder(@panel-color);
					color: @panel-color;
				}

				.checkbox {
					font-size: 13px;
					border-bottom: @panel-border;
					padding: 0 15px 10px 20px;
					margin: 5px -15px 15px -15px;
				}

				> h4 {
					font-size: 17px;

					> .fa:hover {
						cursor: pointer;
						transform: scale(1.2);
					}
				}
			}

			.libraries-list {
				list-style: none;
				padding: 0;

				> li {
					padding: 5px 10px;
					margin-bottom: 5px;
					background-color: @panel-box-background;
					font-size: 13px;
					border-radius: 3px;

					> .fa-link {
						padding-right: 5px;
						display: none;
					}

					> .lib-actions {
						display: inline-block;
						float: right;

						> .fa {
							&:hover {
								transform: scale(1.2);
								color: #fff;
							}

							&:first-of-type {
								margin-right: 5px;
							}
						}
					}

					&:hover {
						cursor: pointer;
						background-color: lighten(@panel-box-background, 15%);
					}

					&.attached {
						background-color: lighten(@panel-box-background, 15%);

						> .fa-link {
							display: inline-block;
						}
					}
				}
			}
		}
	}

	> #editor-header {
		height: 30px;
		background-image: linear-gradient(90deg, #2c2a29 0%, #32302f 100%);
		background-image: -webkit-linear-gradient(90deg, #2c2a29 0%, #32302f 100%);
		box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
		border-bottom: 1px solid #111010;
		text-shadow: 0 -1px 0 #1e1d1c;
		color: @panel-color;
		overflow: hidden;

		.pretty-select {
			background: @panel-background;
			text-transform: capitalize;
			outline: none;
			border: none;
			border-right: 1px solid @panel-box-background;
			height: 29px;
		}

		[bl-show-editor="js"] {
			margin-right: 130px;
		}

		.btn-success {
			width: 54px;
			text-align: center;
			border: none;

			&.active {
				background-color: darken(@brand-success, 12%);
			}
		}

		.btn {
			border-radius: 0;
			height: 100%;
			outline: none;
		}

		.btn.with-icon {
			padding: 0;
			border: none;
		}

		.fa {
			font-size: 16px;
			width: 25px;
			padding: 5px;
			background: linear-gradient(#2e2e2e, #212121);
			background: -webkit-linear-gradient(#2e2e2e, #212121);
			box-shadow: 0 -1px 0 #3f3f3f, 0 -2px 0 #0d0d0d;
			color: darken(#fff, 5%);

			&:hover {
				cursor: pointer;
				color: #fff;
			}
		}
	}
}

#code-editor-wrapper.expanded {
	height: 100%;
}