@import "~scss/_mixins";

.pageMainArchive {
	.wrapper { width: calc(100% - 96px); margin: 0px auto; padding: 52px 0px 0px 0px; user-select: none; }
	.wrapper {
		.body { height: 100%; display: flex; flex-direction: column; }

		.titleWrapper { display: flex; flex-direction: row; align-items: center; gap: 0px 10px; margin: 0px 0px 46px 0px; }
		.titleWrapper {
			.title { @include text-header1; font-weight: 700; }
			.icon.archive { width: 32px; height: 32px; background-image: url('~img/icon/archive/logo.svg'); }
		}

		.objectManagerWrapper {
			.controls {
				.icon.restore { background-image: url('~img/icon/menu/action/restore0.svg'); }
			}

			.ReactVirtualized__List { padding: 12px 0px 80px 0px; }
			
			.items { height: 100%; }
			.items {
				.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

				@media (max-width: 940px) {
					.row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
				}

				.item { gap: 0px 12px; }
				.item {
					.iconObject { flex-shrink: 0; flex-basis: 48px; border-radius: 10px; background-color: var(--color-shape-tertiary); }

					.name { @include text-overflow-nw; width: 100%; }
					.descr { @include text-overflow-nw; @include text-small; width: 100%; color: var(--color-text-secondary); }
				}
			}
		}
	}

}

.pageMainSet > #loader { position: fixed; top: 0px; width: 100%; height: 100%; }