@import "~scss/_mixins";

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

		.items { flex-grow: 1; }
		.item { padding: 4px 10px; display: flex; }
		.item {
			.icon.plus { margin-right: 4px; background-image: url('~img/icon/plus/menu0.svg'); }
			.switch { position: absolute; right: 16px; top: 50%; margin-top: -8px; }
			.name { @include text-overflow-nw; width: calc(100% - 90px); }
		}
		.item.hover::before { background: var(--color-shape-highlight-medium); }

		.bottom { flex-shrink: 0; }
		.bottom {
			.line { margin-top: 0px; }
		}
	}
	
	.menu.menuDataviewRelationEdit { width: var(--menu-width-icon); }
	.menu.menuDataviewRelationEdit {
		.content { padding: 0px; max-height: unset; }
		.form { padding: 8px 0px; }
		.switch { position: absolute; right: 16px; top: 50%; margin-top: -8px; }
		.button { width: 100%; }
		.button.grey { cursor: default; }

		.item:hover::before { background: var(--color-shape-highlight-medium); }
		.item.disabled { cursor: default; opacity: 1 !important; }
		.item.disabled:hover::before { opacity: 0; }

		.item.withCaption {
			.caption { @include text-common; line-height: 20px; width: 40px; padding-right: 16px; overflow: visible; }
		}

		.icon.lock { margin-right: 6px; }
		
		.icon.arrow { 
			width: 20px; height: 20px; position: absolute; right: 14px; top: 50%; margin: -10px 0px 0px 0px; 
			background-image: url('~img/arrow/menu.svg'); 
		}
	}

}