@import "~scss/_mixins";

.menus {
	.menu.menuDataviewFileList, 
	.menu.menuDataviewFileValues {
		width: var(--menu-width-value);
	}
	.menu.menuDataviewFileList, 
	.menu.menuDataviewFileValues {
		.wrap { height: 100%; display: flex; flex-direction: column; }

		.emptySearch { padding: 8px 0px; }
		.bottom { flex-shrink: 0; padding: 0px 0px 8px 0px; }
		.bottom {
			.line { margin-top: 0px; }
		}
	}

	.menu.menuDataviewFileList {
		.content { padding-top: 12px; padding-bottom: 0px; transition: none; }

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

	.menu.menuDataviewFileValues {
		.titleWrapper { padding-bottom: 0px; }
		.content { padding: 0px; overflow: visible; max-height: unset; }

		.items { height: calc(100% - 28px); overflow: auto; height: 100%; max-height: 360px; padding: 8px 0px; }
		.item { display: flex; align-items: flex-start; gap: 0px 6px; }
		.item {
			img { display: block; max-width: 100%; max-height: 208px; object-fit: contain; }
			.name { line-height: 20px; width: calc(100% - 26px); @include text-overflow-nw; }
			.clickable { width: calc(100% - 44px); display: inline-block; vertical-align: top; }
			.icon.more { background-color: var(--color-bg-primary); }
			.icon.dnd { height: auto; align-self: stretch; background-position: center 2px; background-size: 20px; }
		}
		.item.isImage {
			.icon.more { top: 12px; right: 12px; margin: 0px; }
			.icon.more:hover, .icon.more.active { background-color: var(--color-shape-highlight-medium); }
		}

		.item.isFile:hover, .item.isFile.active {
			.clickable { width: calc(100% - 46px); }
		}
		.item:hover::before { background: var(--color-shape-highlight-medium); }
		.item:hover, .item.active {
			.icon.more { opacity: 1; }
		}

		.section:last-child { padding-bottom: 8px; }
	}
}
