@import "~scss/_mixins";

.pageMainNavigation {
	.wrapper > #loader { position: fixed; top: 0px; width: 100%; height: 100%; background: var(--color-bg-primary); z-index: 1; }

	.sides { display: flex; padding: 0px 16px; }
	.sideName { margin-bottom: 13px; @include text-common; font-weight: 500; padding: 0px 16px; }

	.items { width: 33.33%; padding: 4px 0px; }
	.items.center { padding: 39px 16px 4px 16px; }
	.items {
		.row { width: 100%; padding: 0px 32px 0px 16px; }

		.item { 
			transition: $transitionAllCommon; position: relative; line-height: 48px; margin-bottom: 16px; padding: 0px; 
			border: 1px solid var(--color-shape-secondary); border-radius: 8px; display: flex; flex-direction: row; align-items: center;
			gap: 0px 12px; padding: 12px;
		}
		.item {
			.iconObject { flex-shrink: 0; background: var(--color-shape-tertiary); border-radius: 6px; }
			.info { border: 0px; flex-grow: 1; width: calc(100% - 64px); }
			.name { width: 100%; line-height: 22px; height: 22px; @include text-overflow-nw;  }

			.bottomWrap { 
				display: flex; @include text-overflow-nw; width: 100%; @include text-small; color: var(--color-text-secondary); gap: 0px 6px; 
				align-items: center;
			}
			.bottomWrap {
				.type { max-width: 40%; @include text-overflow-nw; flex-shrink: 0; }
				.descr { position: relative; @include text-overflow-nw; max-width: 100%; }
				.descr:empty { display: none; }
				.bullet { width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-text-secondary); flex-shrink: 0; display: none; }
			}
		}
		.item::before {
			content: ''; width: 24px; height: 24px; position: absolute; right: -24px; top: 50%; transform: translateY(-50%);
			background-image: url('~img/arrow/nav0.svg');
		}
		.item.withDescr {
			.bullet { display: block; }
		}

		.item.isFile {
			.iconObject { background-color: unset; }
		}

		.item.selected { 
			padding: 16px; border-radius: 8px; border: 1px solid var(--color-shape-secondary); transition: $transitionAllCommon; height: auto;
			display: block;
		}
		.item.selected {
			.iconObject { margin-bottom: 8px; }
			.name { margin-bottom: 1px; @include text-overflow-nw; height: 22px; }
			.descr { @include text-small; color: var(--color-text-secondary); @include text-overflow; max-height: 54px; }
			.descr:empty { display: none; }
			.cover { position: relative; height: 176px; margin-top: 4px; background-size: cover !important; background-position: center !important; }

			.buttons { margin-top: 16px; display: flex; flex-direction: row; align-items: center; gap: 0px 8px; }
			.buttons {
				.button { width: 100%; }
				.button {
					.icon.expand { background-image: url('~img/icon/expand.svg'); width: 20px; height: 20px; position: absolute; left: 8px; top: 6px; }
				}
			}
		}

		.item.active { background: none; border-color: var(--color-system-accent-100) !important; box-shadow: 0px 0px 0px 1px var(--color-system-accent-100) inset; }
		.item.active::before { background-image: url('~img/arrow/nav1.svg'); }

		.item.empty { height: 74px; cursor: default; padding: 12px; }
		.item.empty {
			.name { display: inline-block; vertical-align: middle; }
		}
	}

	.items.right {
		.item::before { right: auto; left: -24px; }
	}

	.items.center {
		.item::before { display: none; }
	}
}