/* Scene graph: css varialbes are passed from the main css.
  Change it if using separately
*/

.sc-node-wrapper {
	margin: var(--m-ss) 0;
	/* border: 1px dashed var(--primary-tr-blue); */
	border-top: none;
	border-left: none;
	border-right: none;
	padding: 1rem;
}

.sc-node-parent,
.sc-node-child {
	display: flex;
	justify-content: space-between;
}

.sc-node-child {
	margin-left: 1rem;
}

.sc-left,
.sc-right {
	display: flex;
	align-items: center;
}

.sc-right {
	width: 50%;
	justify-content: flex-end;
	margin-left: var(--m-ss);
}

.sc-folder {
	margin-right: var(--m-ss);
}

.sc-name {
	overflow: hidden;
}

.sg-icon,
.sg-icon-invert,
.sg-icon-active {
	width: 1.1rem;
	padding: 0.2rem;
}

.sg-icon-invert {
	filter: invert(1) sepia(1);
}

/* .sg-btn {
	background-image: url("../assets/img/invisible-black.svg");
	background-repeat: no-repeat;
	background-position: left top;
	width: 1.1rem;
	padding: 0.2rem;
	border: none;
	background-color: white;
} */

.sg-icon-active {
	filter: invert(.5) sepia(2) saturate(2) hue-rotate(170deg);
}

.sg-icon:hover,
.sg-icon-invert:hover,
.sg-icon-active:hover,
.sg-btn:hover {
	cursor: pointer;
}