@import "~scss/_mixins";

.menus {
	.menu.menuDataviewSource { width: var(--menu-width-set); }
	.menu.menuDataviewSource {
		.content { overflow: visible !important; padding: 0px; }
		.scrollWrap { padding: 8px 0px; overflow-x: hidden; overflow-y: auto; max-height: 350px; }

		.item { padding: 8px 16px; position: relative; white-space: nowrap; display: flex; }
		.item {
			.grey { color: var(--color-control-active); }
			.iconObject, .iconWrapper { margin-right: 10px; border-radius: 5px; background-color: var(--color-shape-highlight-medium); }

			.iconWrapper { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
			.iconWrapper {
				.icon { margin: 0px !important; }
				.icon.puzzle { background-image: url('~img/icon/menu/puzzle.svg'); background-size: 24px; }
			}

			.buttons { line-height: 40px; opacity: 0; transition: $transitionAllCommon; }
			.buttons {
				.icon { vertical-align: middle; opacity: 1; }
			}

			.name { @include text-overflow-nw; width: 100%; vertical-align: middle; }

			.select { overflow: hidden; border: 0px; padding: 0px; display: block; }
			.select:hover, .select.isFocused { background: none; }
			.select {
				.icon.relation { display: none; }
				.icon.arrow { display: none; }
			}

			.condition { color: var(--color-text-secondary); margin-right: 4px; }
			.value { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; line-height: 22px; }

			.tagItem { margin: 2px 4px 0px 0px; vertical-align: top; }

			.element { display: inline-block; vertical-align: top; margin-right: 4px; line-height: 22px; }
			.element {
				.iconObject { margin-right: 2px; }
			}

			.txt { width: calc(100% - 74px); line-height: 20px; height: 40px; }
		}
		.item.empty { padding: 13px 16px; }

		.item:hover, .item.hover {
			.buttons { opacity: 1; }
		}

		.item.add { display: block; }
		.item.add {
			.icon.dnd { margin-top: 0px; }
		}

		.item.isSection { padding: 4px 16px; @include text-small; font-weight: 500; color: var(--color-text-secondary); }

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

html.platformWindows {
	.menus {
		.menu.menuDataviewSource {
			.scrollWrap { overflow-y: overlay; }
		}
	}
}
