@import "~scss/_mixins";

.menus {
	.menu.menuBlockCover { width: var(--menu-width-large); }
	.menu.menuBlockCover {
		.content { max-height: unset; height: var(--menu-width-large);; overflow: visible; padding-bottom: 0px;  }
		.wrap { display: flex; flex-direction: column; height: 100%; }

		.head { 
			border-bottom: 1px solid var(--color-shape-secondary); padding: 3px 14px 10px 14px; font-weight: 500; color: var(--color-control-active); 
			flex-shrink: 0;
		}
		.head {
			.btn { display: inline-block; margin-right: 16px; transition: $transitionAllCommon; }
			.btn:hover, .btn.active { color: var(--color-text-primary); }
			.btn:last-child { margin: 0px; }
		}
		
		.filter { padding-top: 12px; flex-shrink: 0; }
		.filter {
			.inner { height: 35px; }
		}

		.loaderWrapper { position: relative; background: none; }

		.sections { overflow: hidden auto; flex-grow: 1; }
		.section > .name { margin-bottom: 8px; }
		.section:first-child { padding-top: 8px; }
		.section:last-child { padding-bottom: 8px; }
		
		.items { 
			padding: 0px 16px; display: grid; grid-template-columns: repeat(4, 88px); grid-column-gap: 8px;
			grid-row-gap: 8px;
		}
		.items {
			.item { padding: 0px; width: 100%; position: relative; }
			.item {
				.cover { height: 48px; position: relative; border-radius: 2px; }
				.name { @include text-small; @include text-overflow-nw; max-width: 100%; margin-top: 2px; color: var(--color-text-secondary); }
			}
			.item:hover {
				.name { text-decoration: underline; }
			}
		}

		.body { height: calc(100% - 36px); }
	
		.body.unsplash, .body.library {
			.sections, .emptySearch { height: calc(100% - 47px); }

			.items { grid-template-columns: repeat(3, 120px); }
			.item {
				.cover { height: 72px; }
			}
		}

		.body.upload { padding: 16px; }
		.body.upload {
			.dropzone { 
				display: flex; align-items: center; border-radius: 2px; background: var(--color-shape-highlight-medium);
				justify-content: center; flex-direction: column; gap: 6px 0px; height: 100%;
			}
			.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); }
				}
			}
		}
	}
}

html.platformWindows, html.platformLinux {
	.menus {
		.menu.menuBlockCover {
			.sections { overflow-y: overlay; }
		}
	}
}
