@use "sass:color";
@use "../var";

/*------------------------------------------------------------------
[14. Nesstables]
*/

.dd-handle{
	border-color: color.adjust(var.$color-master-light, $alpha: -.3);
	color:var.$color-master;
	&:hover{
		background-color: var.$color-master-lightest
	}
}

.dark {
	.dd-handle{
	color:var.$color-master;
	background: var.$color-master-lighter;
		&:hover{
			background-color: var.$color-master-lightest
		}
	}
	.dd-placeholder{
		background-color:var.$color-master-light;
	}

}

.dd3-content{
	background:#fff;
	border-color: color.adjust(var.$color-master-light, $alpha: -.3);
	color:var.$color-master;
	&:hover{
		background-color: var.$color-master-lightest
	}
}

.dd3-handle{
	background:transparent;
	text-indent: 9999px;
	&:before{
		font-family: 'pages-icon';
		color:var.$color-master;
		content:"\e660";
		font-size: 11px;
		top: 5px;
	}
}

.dd-placeholder{
	background:var.$color-master-lighter;
	border-color: color.adjust(var.$color-master, $alpha: -.65);
}

.dd-empty{
	background-image:none;
	background:var.$color-master-lighter;
	border-color: color.adjust(var.$color-master, $alpha: -.5);
}
.dd-item > button{
	font-size: 11px;
	&:before{
	font-family: 'pages-icon';
	content: "\e63b";
	}
}
.dd-item > button[data-action="collapse"]:before{
	font-family: 'pages-icon';
	content: "\e635";
}



/* Responsive Handlers : Nestables
------------------------------------
*/
@media only screen and (min-width: 700px) { 
	.dd {
		width: 100%;
	}
	.nestable-lists{
		.dd{
			float: left;
		}
	}
}