@import "~scss/_mixins";

.menus {

	.menu.menuDataviewObjectList { width: var(--menu-width-value);; }
	.menu.menuDataviewObjectList {
		.content { padding: 0px; transition: none; }
		
		.wrap { height: 100%; display: flex; flex-direction: column; }
		.wrap.withFilter { padding-top: 12px; }
		.wrap.withFilter {
			.items { height: calc(100% - 30px); }
			.emptySearch { height: calc(100% - 30px); }
			.loaderWrapper { position: relative; }
		}

		.items { height: 100%; }
		.item {
			.name { @include text-overflow-nw; width: calc(100% - 26px); }
		}
		.label { color: var(--color-control-active); @include text-common; padding: 0px 16px; }

		.filter { flex-shrink: 0; }
	}

	.menu.menuDataviewObjectList.single { width: var(--menu-width-icon); }
	.menu.menuDataviewObjectList.single {
		.item {
			.name { margin: 0px; }
			.caption { display: none; }
		}
	}

	.menu.menuDataviewObjectValues { width: var(--menu-width-value);; }
	.menu.menuDataviewObjectValues {
		.content { padding: 0px; }

		.item:not(.add) { padding: 4px 10px 4px 12px; }
		.item {
			.icon.dnd { margin: 0px; }

			.name { @include text-overflow-nw; }
			.clickable { width: calc(100% - 24px) !important; }

			.icon.delete { 
				width: 24px; height: 24px; background-size: 20px; right: 10px; border-radius: 4px; opacity: 0; z-index: 1; transition: none; position: static; 
				margin: 0px;
			}
			.icon.delete:hover { background-color: var(--color-shape-highlight-medium); }
		}
		.item.withCaption { gap: 0 2px; }
		.item.withCaption {
			.clickable {
				.name { width: calc(100% - 16px); }
			}
		}
		.item.hover, .item:hover {
			.clickable { width: calc(100% - 44px) !important; }
			.icon.delete { opacity: 1; }
		}

		.item.add {
			.clickable { width: 100%; display: block; }
		}
	}

	.menu.menuDataviewObjectValues.fromFilter {
		.item {
			.icon.dnd { display: none; }
		}
	}
}