@import "~scss/_mixins";

.menus {
	.menu.menuDataviewFilterList { width: var(--menu-width-set); }
	.menu.menuDataviewFilterList {
		.content { overflow: visible !important; padding: 0px; }
		.wrap { height: 100%; display: flex; flex-direction: column; }
		.items { flex-grow: 1; }

		.item { padding: 4px 10px; position: relative; white-space: nowrap; display: flex; align-items: center; }
		.item {
			.grey { color: var(--color-control-active); }
			.iconObject.mainIcon { margin-right: 10px; background-color: var(--color-shape-highlight-medium); }

			.buttons { line-height: 44px; display: none; gap: 0px 8px; margin: 0px 0px 0px 8px; }
			.buttons {
				.icon { vertical-align: middle; opacity: 1; }
			}

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

			.tagItem { margin: 1px 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 { line-height: 20px; height: 40px; display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; overflow: hidden; }
			.txt {
				> .name { @include text-overflow-nw; max-width: 100%; }
				> .flex { line-height: 20px; max-width: 100%; }
				> .name, > .flex { display: flex; align-items: center; }

				.condition { color: var(--color-text-secondary); margin-right: 4px; }
				.value { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; }
			}
		}
		.item.empty { margin: 8px 0px; padding: 14px 16px; }

		.item:not(.isReadonly) {
			.txt {
				> .name::after, > .flex::after { content: ''; width: 20px; height: 20px; flex-shrink: 0; }
				> .name::after { background-image: url('~img/arrow/select/dark.svg'); }
				> .flex::after { background-image: url('~img/arrow/select/light.svg'); }
			}
		}

		.item:not(.isReadonly):hover, 
		.item:not(.isReadonly).hover 
		{
			.buttons { display: flex; }
		}

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

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

	.menu.menuDataviewFilterValues { width: var(--menu-width-value); }
	.menu.menuDataviewFilterValues {
		.select { border: 0px; padding: 0px; display: block; width: 100%; }
		.select:hover, .select.isFocused { background: none; }
		.select {
			.icon.arrow { background-image: url('~img/arrow/filter.svg') !important; }
		}
		.select.checkboxValue {
			.item { @include text-common; }
			.icon.arrow { right: -8px !important; }
		}

		.item { display: flex; gap: 0px 6px; }
		.item.withCaption { align-items: center; justify-content: space-between; }
		.item {
			.clickable { width: 100%; height: 20px; display: flex; }
			.buttons { margin: 0px; position: static; display: none; }

			.icon.delete { transition: none; width: 20px !important; height: 20px !important; }
			.icon.plus { margin: 0px; }

			.name { @include text-overflow-nw; width: calc(100% - 40px); }

			.input { width: calc(100% - 20px); }

			.icon.clear { 
				width: 20px; height: 20px; background-image: url('~img/icon/clear0.svg'); position: absolute; right: 10px; top: 4px;
				opacity: 0; margin: 0px; transition: opacity $transitionCommon;
			}
			.icon.clear:hover { background-image: url('~img/icon/clear1.svg'); }
			.icon.clear.active { opacity: 1; }
		}
		.item.empty { padding: 13px 16px; }

		.item:not(.isReadonly):hover, .item:not(.isReadonly).hover {
			.caption { display: none; }
			.buttons { display: block; }
		}

		.tagItem { vertical-align: top; margin-top: 1px; }

		.input { border: 0px; padding: 0px; height: 20px; }
	}
}
