@import "compass";

.opensocial-portlet-editor {
	.tree-view-editor {
		background: #FFF;
		height: 100%;
	}

	.tree-view-editor-column {
		float: left;
		height: 100%;
		width: 20%;
	}

	.main-editor-column {
		float: right;
		height: 100%;
		width: 80%;
	}

	.tree-view-editor {
		.tree-node {
			.tree-node-loaded {
				color: #06C;
				font-weight: bold;
			}

			.tree-label:hover {
				color: #06C;
			}

			.tree-node-loaded .tree-label {
				font-weight: bold;
			}
		}

		.tree-node-selected {
			background: #E4F5FC;

			.tree-label {
				font-weight: normal;
			}
		}

		.tree-node-content:hover .gadget-editor-tree-node-contextmenuicon, .gadget-editor-tree-node-contextmenuicon-open {
			background-repeat: no-repeat;
			color: #555;
			float: right;
			margin-right: 4px;
			text-decoration: none;
		}

		.tree-node-content {
			.gadget-editor-tree-node-contextmenuicon {
				display: none;
			}

			.gadget-editor-tree-node-contextmenuicon-open {
				display: inline;

				@include opacity(0.5);
			}

			&:hover {
				.gadget-editor-tree-node-contextmenuicon {
					display: inline;

					@include opacity(0.5);

					&:hover {
						@include opacity(1);
					}
				}
			}
		}
	}

	.panel-bd {
		background: #FFFFFF;
		overflow: auto;
	}

	.nav-tabs {
		margin-bottom: 0px;

		.tab {
			cursor: pointer;

			.gadget-editor-tab-close {
				color: #555;
				margin-left: 4px;

				@include opacity(0.5);

				&:hover {
					@include opacity(1);

					text-decoration: none;
				}
			}
		}
	}

	.gadget {
		height: 100%;
		width: 100%;
	}
}

.gadget-editor-contextmenu-toolbar {
	background: #EEF0F2;

	.btn {
		width: 100%;
		text-align: left;
	}
}

.editable {
	z-index: 10;
}

.ie .opensocial-portlet-editor .tabview-list .tab-content .gadget-editor-tab-close {
	@include opacity(0.2);

	&:hover {
		@include opacity(1);

		zoom: 1;
	}
}

/* ---------- Extras ---------- */
.gadget-editor-contextmenu-toolbar {
	box-shadow: 4px 4px 8px #888888;
}