////////////////////////////////////////////////////////////////////////////////
// .halo
////////////////////////////////////////////////////////////////////////////////
.element-action {
	position: absolute;
	pointer-events: none
}

////////////////////////////////////////////////////////////////////////////////
// .handles
////////////////////////////////////////////////////////////////////////////////
.element-action .holder {
	display: flex;
	position: absolute;
	top: -60px;
	border-radius: 4px 4px 4px 0;
	border: 4px solid hsl(0, 0%, 91%);
	background-color: var(--gray-90);
	box-shadow: -1px 0 0 rgba(0,0,0, 0.1),
				0 -1px 1px rgba(0,0,0, 0.3);
}

.element-action .holder:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: -4px;
	margin-top: 4px;
	border-top: 16px solid var(--gray-90);
	border-left: 0 solid transparent;
	border-right: 13px solid transparent;
	box-shadow: -1px 0 0 rgba(0,0,0, 0.2);
}

////////////////////////////////////////////////////////////////////////////////
// .halo .handle
////////////////////////////////////////////////////////////////////////////////
.element-action .item.hidden {display: none;}

.element-action .item {
	display: inline-block;
	position: relative;
	width: 36px;
	height: 36px;
	cursor: pointer;
	user-select: none;
	pointer-events: auto;
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
}

.element-action .item:hover {
	background-color: var(--white);
}

////////////////////////////////////////////////////////////////////////////////
// .handle types
////////////////////////////////////////////////////////////////////////////////
.item.clone,
.item.link,
.item.fork,
.item.rotate {cursor: move;}

.item.resize {cursor: se-resize;}


////////////////////////////////////////////////////////////////////////////////
// select actions
////////////////////////////////////////////////////////////////////////////////
.selection {
	position: absolute;
	border: 2px solid var(--brand-default);
	border-radius: 3px;
	overflow: visible;
	background-color: hsla(153, 43%, 42%, 0.2);
 }

 .selected .selection-wrapper {
	position: absolute;
	transform: scale(1.3);
	border: 2px solid var(--brand-default); 
	border-radius: 3px;
 }

 .selection.selected {
	position: static;
	height: 0 !important;
	border: none;
	background-color: transparent;
 }

 .selection-box {
	position: absolute;
	border-radius: 2px;
	border: 1px dashed var(--brand-default); 
	transform: scale(1.15);
	cursor: move;
 }