@import "~scss/_mixins";

.menus {
	.menu.menuDataviewOptionList { width: var(--menu-width-value);; }
	.menu.menuDataviewOptionList {
		.content { overflow: hidden; transition: none; padding: 0px; max-height: unset; }
		.content {
			.wrap { height: 100%; display: flex; flex-direction: column; }
			.wrap.noFilter {
				.items { height: 100%; }
			}

			.items { height: calc(100% - 38px); }
		}

		.item { display: flex; align-items: center; }
		.item:not(.add, .empty) { padding: 0px 10px 0px 0px; gap: 0px 4px; }
		.item {
			.clickable { padding: 4px 14px; }

			.buttons { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; flex-shrink: 0; }
			.buttons {
				.icon.more { display: none; }
			}
		}
		.item.withCheckbox {
			.clickable { width: calc(100% - 24px); }
		}

		.item:hover, .item.hover {
			.clickable { width: calc(100% - 28px); }
			.buttons {
				.icon.more { display: block; }
			}
		}
		.item.withCheckbox:hover, .item.withCheckbox.hover {
			.clickable { width: calc(100% - 50px); }
		}

		.item.add {
			.name { @include text-overflow-nw; }
		}
	}

	.menu.menuDataviewOptionList.fromFilter {
		.item {
			.icon.more { display: none; }
		}
	}

	.menu.menuDataviewOptionList.fromFeatured {
		.filter { padding-top: 8px; }
		.item {
			.buttons,
			.icon.chk { right: 14px; }
		}
		.item:hover, .item.hover {
			.icon.chk { right: 40px; }
		}
	}

	.menu.menuDataviewOptionEdit { width: var(--menu-width-icon); }
	.menu.menuDataviewOptionEdit {
		.content { padding-top: 12px; overflow: visible; max-height: unset; }
		.filter { margin-bottom: 8px; }

		.item:hover::before { background: var(--color-shape-highlight-medium); }
		.item.active::before { z-index: 1; }

		.section.colorPicker { padding: 8px 14px 0px 14px; }
		.section.colorPicker {
			.items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; grid-gap: 8px; align-items: center; }
			.items {
				.item.color { width: 38px; height: 38px; border-radius: 50%; position: relative; padding: 0px; }
				.item.color::before { display: none; }
				.item.hover, .item:hover { box-shadow: 0px 0px 0px 1px var(--color-bg-primary), 0px 0px 0px 3px var(--color-shape-primary); }

				.item {
					.icon.tick { 
						position: absolute; left: 50%; top: 50%; margin: -10px 0px 0px -10px; width: 20px; height: 20px; 
						background-image: url('~img/icon/tick.svg'); 
					}
				}

				.item.color-grey { background: var(--color-control-active); }
				.item.color-yellow { background: var(--color-yellow); }
				.item.color-orange { background: var(--color-orange); }
				.item.color-red { background: var(--color-red); }
				.item.color-pink { background: var(--color-pink); }
				.item.color-purple { background: var(--color-purple); }
				.item.color-blue { background: var(--color-blue); }
				.item.color-ice { background: var(--color-ice); }
				.item.color-teal { background: var(--color-teal); }
				.item.color-lime { background: var(--color-lime); }
			}
		}
		.section.colorPicker:after { margin: 16px 0px 0px 0px; }
	}

}
