@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) { gap: 0px 4px; padding-left: 10px; }
		.item {
			.buttons { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; flex-shrink: 0; }
			.buttons {
				.icon.more { display: none; }
			}

			&.withCheckbox {
				.clickable { width: calc(100% - 24px); }
			}

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

			&.withCheckbox:hover, &.withCheckbox.hover {
				.clickable { width: calc(100% - 50px); }
			}

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

			&.isDragging { z-index: 1; }
		}

		&.fromFilter {
			.item {
				.icon.more { display: none; }
			}
		}

		&.fromFeatured {
			.filter { padding-top: 8px; }
			.item {
				.buttons,
				.icon.chk { right: 14px; }

				&:hover, &.hover {
					.icon.chk { right: 40px; }
				}
			}
		}
	}

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

		.item:not(.disabled):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: 4px 12px; align-items: center; }
			.items {
				.item.color { width: 28px; height: 28px; border-radius: 50%; position: relative; padding: 0px; }
				.item.color::before { display: none; }
				.item:not(.selected).hover::after,
				.item:not(.selected):hover::after { transform: scale3d(1.17, 1.17, 1); }
				.item.color.selected { box-shadow: 0px 0px 0px 1px var(--color-shape-primary); }

				.item.color::after {
					content: ''; position: absolute; left: 50%; top: 50%; margin: -8px 0px 0px -8px; width: 16px; height: 16px;
					transition: transform $transitionCommon; border-radius: 50%;
				}

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

}
