.editor{
	position   : relative;

	width      : 100%;

	height : 500px;

	.snippetBar{
		padding : 5px;
		background-color: #ddd;

		display: flex;

		align-items: center;


		.snippetGroup{
			.animate(background-color);

			border-radius : 5px;
			&:hover, &.selected{
				background-color: #999;
			}
			padding : 5px;
			font-size: 15px;
			margin: 0px 10px;

			.text{
				line-height: 20px;

				.groupName{
					margin-left: 6px;
					font-size: 12px;

				}
			}

			//cursor : pointer;

			&:hover{
				.dropdown{
					visibility: visible;
				}
			}


			.dropdown{
				position: absolute;
				z-index : 1000;
				background-color: #ddd;
				padding : 5px;
				visibility: hidden;

				.snippet{
					font-size: 13px;
					padding : 10px;
					.animate(background-color);
					cursor : pointer;
					&:hover{
						background-color: #999;
					}
				}

			}

		}


	}




	.codeEditor{
		height : 100%;
	}
}