@import "~scss/_mixins";

.menus {
	.menu.menuSmile { width: var(--menu-width-large); user-select: none; }
	.menu.menuSmile {
		.content { overflow: visible; padding-bottom: 0px; max-height: unset; height: 404px; }
		.wrap { display: flex; flex-direction: column; height: 100%; }
		.ReactVirtualized__List { padding: 0px 0px 8px 0px; }

		.head { 
			color: var(--color-control-active); padding: 3px 14px 10px 14px; border-bottom: 1px solid var(--color-shape-secondary); 
			display: flex; flex-direction: row; justify-content: space-between; align-items: center;
		}
		.head {
			.side.left { display: flex; flex-direction: row; gap: 0px 16px; align-items: center; font-weight: 500; }
			
			.tab { display: inline-block; vertical-align: top; transition: $transitionAllCommon; @include text-overflow-nw; }
			.tab:hover, .tab.active { color: var(--color-text-primary); }
		}

		.filter.withHead { padding-top: 12px; }
		.filter {
			.inner { height: 35px; }
		}

		.body.smile, .body.icon, .body.library { display: flex; flex-direction: column; height: 100%; }
		.body.smile, .body.icon, .body.library {
			.items { height: 100%; }
		}

		.body.icon {
			.ReactVirtualized__List { padding-top: 8px; }

			.row { padding: 0px 12px; display: grid; grid-template-columns: repeat(9, 1fr); }

			.item { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; position: relative; border-radius: 6px; padding: 0px; }
			.item::before { display: none; }
			.item.active,
			.item.hover { background: var(--color-shape-highlight-medium); }

			.item {
				.iconObject { margin: 0px; }
			}
		}

		.body.smile {
			.section { padding: 11px 14px !important; border: 0px; }
			.section > .name { padding: 0px; margin: 0px; }
			
			.row { padding: 0px 12px; display: grid; grid-template-columns: repeat(9, 1fr); }
			
			.item { width: 40px; height: 40px; position: relative; border-radius: 6px; padding: 0px; }
			.item::before { display: none; }
			.item.active { background: var(--color-shape-highlight-medium); }

			.item {
				.iconObject { position: absolute; left: 50%; top: 50%; margin: -16px 0px 0px -16px; width: 32px; height: 32px; line-height: 32px; }
				.iconEmoji .emoji-mart-emoji { vertical-align: top; }
				.iconEmoji .emoji-mart-emoji span { margin-top: 2px; }
			}

			.foot { padding: 5px 16px 6px 16px; border-top: 1px solid var(--color-shape-secondary); display: flex; justify-content: space-between; }
			.foot {
				.icon { width: 32px; height: 32px; border-radius: 4px; background-size: 20px; flex-shrink: 0; transition: $transitionAllCommon; }
				.icon:hover { background-color: var(--color-shape-highlight-medium); }

				.icon.recent { background-image: url('~img/icon/emoji/recent0.svg'); }
				.icon.recent.active { background-image: url('~img/icon/emoji/recent1.svg'); }

				.icon.people { background-image: url('~img/icon/emoji/people0.svg'); }
				.icon.people.active { background-image: url('~img/icon/emoji/people1.svg'); }

				.icon.nature { background-image: url('~img/icon/emoji/nature0.svg'); }
				.icon.nature.active { background-image: url('~img/icon/emoji/nature1.svg'); }

				.icon.foods { background-image: url('~img/icon/emoji/foods0.svg'); }
				.icon.foods.active { background-image: url('~img/icon/emoji/foods1.svg'); }

				.icon.activity { background-image: url('~img/icon/emoji/activity0.svg'); }
				.icon.activity.active { background-image: url('~img/icon/emoji/activity1.svg'); }

				.icon.places { background-image: url('~img/icon/emoji/places0.svg'); }
				.icon.places.active { background-image: url('~img/icon/emoji/places1.svg'); }

				.icon.objects { background-image: url('~img/icon/emoji/objects0.svg'); }
				.icon.objects.active { background-image: url('~img/icon/emoji/objects1.svg'); }

				.icon.symbols { background-image: url('~img/icon/emoji/symbols0.svg'); }
				.icon.symbols.active { background-image: url('~img/icon/emoji/symbols1.svg'); }

				.icon.flags { background-image: url('~img/icon/emoji/flags0.svg'); }
				.icon.flags.active { background-image: url('~img/icon/emoji/flags1.svg'); }

				.icon.random { background-image: url('~img/icon/emoji/random0.svg'); }
			}
		}

		.body.library {
			.filter { margin: 0px 0px 7px 0px; }

			.row { padding: 3px 14px; }
			.row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0px 8px; }

			.item { padding: 0px; color: var(--color-text-secondary); position: relative; }
			.item {
				.img { width: 100%; height: 100%; border-radius: 2px; background-repeat: no-repeat; background-size: cover; background-position: center; }
				.name { 
					position: absolute; left: 0px; bottom: 6px; padding: 0px 6px; @include clamp2; width: 100%; word-wrap: break-word; z-index: 1; 
					transition: opacity 0.2s $easeInQuint; opacity: 0; @include text-very-small; color: #fff; max-height: 28px; line-height: 14px;
				}
			}
			.item::after {
				content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border-radius: 2px; opacity: 0;
				transition: opacity 0.2s $easeInQuint; background: var(--color-shape-highlight-medium);
			}
			.item.active {
				.name { opacity: 1; }
			}
			.item.active::after { opacity: 1; } 
		}

		.body.upload { padding: 16px; height: 100%; }
		.body.upload {
			.loaderWrapper { height: calc(100% - 36px); top: 36px; }

			.dropzone { 
				height: 100%; display: flex; align-items: center; border-radius: 2px; background: var(--color-shape-highlight-medium);
				justify-content: center; flex-direction: column; gap: 6px 0px; padding: 16px; text-align: center;
			}
			.dropzone.isDraggingOver { background: var(--color-system-drop-zone); }

			.dropzone {
				.icon.coverUpload { width: 28px; height: 28px; background-image: url('~img/icon/cover/upload.svg'); display: block; }
				.label {
					span { color: var(--color-text-secondary); }
				}
			}
		}
	}

	.menu.menuSmileSkin,
	.menu.menuSmileColor { padding: 4px 10px; white-space: nowrap; }
	.menu.menuSmileSkin,
	.menu.menuSmileColor {
		.item { display: inline-block; vertical-align: top; width: 40px; height: 40px; position: relative; border-radius: 6px; }
		.item {
			.iconObject { position: absolute; left: 50%; top: 50%; margin: -16px 0px 0px -16px; width: 32px; height: 32px; line-height: 32px; }
			.iconEmoji .emoji-mart-emoji span { margin-top: 2px; }
		}
		.item.active { background: var(--color-shape-highlight-medium); }
		.item:last-child { margin: 0px; }
	}
}

html.platformWindows, html.platformLinux {
	.menus {
		.ReactVirtualized__List { overflow-y: overlay !important; }
	}
}
