@import "~scss/_mixins";

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

		.item { padding: 4px 10px; white-space: nowrap; display: flex; align-items: center; }
		.item {
			.iconObject { margin-right: 10px; }
			
			.select { border: 0px; padding: 0px; display: block; padding-right: 20px; }
			.select:hover, .select.isFocused { background: none; }
			.select.grey { color: var(--color-control-active); }
			.select {
				.icon.relation { display: none; }
			}

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

			.txt { width: calc(100% - 74px); line-height: 20px; height: 40px; display: flex; flex-direction: column; align-items: flex-start; }
			.txt {
				.label { 
					@include text-common; display: flex; align-items: center; font-weight: 400; line-height: 20px; padding: 0px; margin: 0px; 
					color: var(--color-text-primary); 
				}
			}
		}
		.item.empty { margin: 8px 0px; padding: 14px 16px; }
		.item.isReadonly {
			.txt { width: calc(100% - 50px); }
		}

		.item:not(.isReadonly) {
			.txt {
				.label::after { content: ''; width: 20px; height: 20px; background-image: url('~img/arrow/select/dark.svg'); }
			}
		}

		.item:not(.isReadonly):hover, 
		.item:not(.isReadonly).hover
		{
			.buttons { display: flex; }
			.txt { width: calc(100% - 126px); }
		}

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