@import "~scss/_mixins";

.menus {
	.menu.menuSelect {
		.content { transition: none; overflow: hidden; padding: 0px; }
		.items { height: 100%; overflow: auto; }

		.item { display: flex; align-items: center; }
		.item {
			.icon { flex-shrink: 0; }
			.name { width: 100%; @include text-overflow-nw; }
		}

		.item.isInitial { padding: 2px 16px; line-height: 18px; margin-bottom: 2px; }
		.item.isInitial {
			.name { text-transform: uppercase; @include text-very-small; }
		}
	}

	.menu.menuSelect.withFilter {
		.content { padding: 8px 0px 0px 0px; }
		.items { height: calc(100% - 30px); }
	}

	.menu.menuSelect.withAdd {
		.content { max-height: 378px; }
	}

	.menu.menuSelect.skip { width: var(--menu-width-value); }
	.menu.menuSelect.skip {
		.name { margin: 0px; width: calc(100% - 24px); @include text-overflow-nw; }
	}

	.menu.menuSelect.button {
		.item { white-space: nowrap; display: inline-block; margin-right: 16px; color: var(--color-control-active); font-weight: 500; }
		.item:hover { color: var(--color-text-primary); }
		.item:last-child { margin-right: 0px; }
	}

	.menu.menuSelect.center {
		.item { text-align: center; }
	}

	.menu.menuSelect.withFullDescripion {
		.content { overflow: auto; padding: 0px; }

		.item.withDescription { height: auto; }
		.item.withDescription {
			.iconObject { background-color: var(--color-shape-highlight-medium); }
			.descr { overflow: visible; white-space: normal; height: auto; }
		}
	}

	.menu.menuSelect.noScroll {
		.content { overflow: hidden; max-height: unset; }
	}

	.menu.menuSelect.noVirtualisation {
		.items { padding: 8px 0px; }
	}

	.menu.menuSelect.spaceSelect { width: var(--menu-width-set); }
	.menu.menuSelect.spaceSelect {
		.item { padding: 4px 16px; }
		.item {
			.icon.plus {
				border-radius: 8px; border: 1px solid var(--color-shape-secondary); background-color: var(--color-shape-highlight-light);
				background-image: url('~img/icon/popup/usecase/plus.svg'); width: 48px; height: 48px; background-size: 20px;
			}
			.iconObject, .icon { margin: 0px; }
			.iconObject.isSpaceView { border-radius: 8px !important; }
			.clickable { align-items: center; gap: 0px 12px; }
		}

		.item.add { gap: 0px 12px; }
	}

	/* Links, Backlinks */
	.menu.menuSelect.featuredLinks {
		.item {
			.info { width: 100%; }
			.iconObject { margin: 0px; background-color: var(--color-shape-highlight-medium); }
		}
	}

	/* Chat attachment */
	.menu.menuSelect.chatAttachment {
		.item {
			.icon.object { background-image: url('~img/icon/chat/attachment/object.svg'); }
			.icon.media { background-image: url('~img/icon/chat/attachment/media.svg'); }
			.icon.file { background-image: url('~img/icon/chat/attachment/file.svg'); }
		}
	}
}
