.sone {
	ul {
		list-style: none;
		margin: 0;
		margin-left: 1.5rem;
		padding: 0;
	}

	> ul {
		margin-left: 0 !important;
	}
}

.sone-item {
	list-style: none;

	&:has(.dropdown-toggle.show) {
		position: relative;
		z-index: 100;
	}

	&[data-indent="0"] > .sone-card .sone-toggle {
		visibility: hidden;
	}
}

.sone-card {
	padding: 1rem 0;
	border-top: 1px solid var(--co-gray-70);
	border-bottom: 1px solid var(--co-gray-70);
	margin-top: -1px;
	display: flex;
	align-items: center;
	gap: $sp-2;

	.sone-header + .sone > ul > li:first-child & {
		border-top: none;
	}
}

.sone-handle {
	position: relative;
	width: 6rem;
	min-width: 6rem;
	height: 6rem;
	cursor: grab;
	background-color: var(--co-gray-90);
	border-radius: $sp-2;

	.ico {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

.sone-toggle {
	&.is-open .ico {
		transform: scale(1, -1);
	}
}

.sone-thumb {
	.dropdown-menu-content {
		min-width: unset;
		white-space: nowrap;
	}
}

.sone-info {
	flex-grow: 1;
}

.sone-btn {
	// for /pages
	.sone-pages .sone-item[data-level="2"] &-home,
	.sone-pages .sone-item[data-level="3"] &-home,
	.sone-pages .sone-item[data-level="2"] &-topmenu,
	.sone-pages .sone-item[data-level="3"] &-topmenu {
		visibility: hidden;
	}
}

// modifiers
.sone.has-max-depth-1 {
	.sone-toggle { display: none; }
	.sone-info   { padding-left: $sp-3;}
}


@include mediaQ(smMax) {
	.sone-card {
		flex-wrap: wrap;
		row-gap: $sp-2;
	}

	.sone-handle,
	.sone-thumb .thumb-60x60 {
		width: 5rem;
		min-width: 5rem;
		height: 5rem;
	}

	.sone-btns {
		flex-wrap: wrap;
		width: 100%;
		/* .btn {
			width: 3rem !important;
			min-width: 3rem !important;
			height: 3rem !important;
			.ico {
				font-size: .8em !important;
			}
		} */
	}
}

@include mediaQ(sm) {
	.sone {
		ul { margin-left: 3.4rem; }
	}
}