@import "~scss/_mixins";

.pageMainHistory * { user-select: none; }
.pageMainHistory {
	#body { overflow: hidden; }
	#loader { 
		position: absolute; right: $sidebarRightWidth !important; top: 0px; width: 100%; height: 100%; width: calc(100% - $sidebarRightWidth) !important; z-index: 10; 
		background: var(--color-bg-primary); 
	}

	#body {
		> #historySideLeft { width: calc(100% - $sidebarRightWidth); overflow-x: hidden; overflow-y: auto; position: relative; }

		> #historySideRight { width: $sidebarRightWidth; z-index: 20; background: var(--color-shape-tertiary); display: flex; flex-direction: column; position: relative; }
		> #historySideRight {
			> .head { 
				display: flex; flex-direction: row; align-items: center; justify-content: space-between; -webkit-app-region: no-drag; 
				@include text-paragraph; font-weight: 600; flex-shrink: 0; padding: 12px 16px;
			}
			> .head {
				.name { @include text-overflow-nw; }
				.icon.close { background-image: url('~img/icon/close.svg'); }
			}

			> .scrollWrap { flex-grow: 1; overflow-y: auto; }
			> .scrollWrap {
				> .scroll { display: flex; flex-direction: column; gap: 12px 0px; padding: 0px 12px 12px 12px; }
			}

			.section { background: var(--color-bg-primary); border-radius: 10px; -webkit-app-region: no-drag; padding: 0px 0px 8px 0px; }
			.section {
				.head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 16px 4px 16px; gap: 0px 6px; }
				.head {
					.name, .date { @include text-overflow-nw; flex-grow: 1; }
					.date { color: var(--color-text-secondary); }

					.authors { display: flex; flex-direction: row; align-items: center; }
					.authors {
						.iconObject { margin-left: -6px; border: 2px solid var(--color-bg-primary); background-color: var(--color-bg-primary) !important; }
					}

					.icon.arrow { width: 20px; height: 20px; background-image: url('~img/arrow/historyList.svg'); transition: none; transform: rotateZ(180deg); }
				}

				.items { display: none; transition: $transitionAllCommon; padding: 0px 4px; }
			}

			.section.isExpanded {
				.head {
					.icon.arrow { transform: none; }
				}
			}

			.item {
				> .info { padding: 8px 12px; display: flex; flex-direction: column; transition: $transitionAllCommon; border-radius: 6px; }
				> .info:hover { background-color: var(--color-shape-highlight-medium); }

				.author { display: flex; flex-direction: row; gap: 0px 6px; @include text-small; color: var(--color-text-secondary); align-items: center; }

				.child {
					> .info { display: flex; flex-direction: row; align-items: center; gap: 0px 6px; border-radius: 6px; padding: 3px 16px; transition: $transitionAllCommon; }
					> .info:hover { background-color: var(--color-shape-highlight-medium); }

					.icon { width: 20px; height: 20px; flex-shrink: 0; border-radius: 4px; cursor: default; }
					.icon.blank { background-image: url('~img/icon/widget/blank.svg'); }
					.icon.arrow { background-image: url('~img/arrow/select/dark.svg'); transform: rotate(-90deg); transition: none; }

					.child {
						> .info { padding-left: 42px; }
						.icon { display: none; }
					}

					.children { display: none; transition: $transitionAllCommon; }
				}
				.child.active { 
					> .info { background-color: var(--color-shape-highlight-medium); }
				}

				.child.isExpanded {
					.icon.arrow { transform: none; }
				}
			}
			.item.active { 
				> .info { background-color: var(--color-shape-highlight-medium);  }
			}

			> .buttons { 
				display: flex; justify-content: center; width: 100%; gap: 0px 8px; position: absolute; right: 0px; bottom: 0px; z-index: 10; padding: 0px 16px 16px 16px; 
				flex-shrink: 0;
			}
			> .buttons {
				.button {
					box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; width: 100%; min-width: 60px; max-width: 200px; background-color: var(--color-bg-primary); 
					color: var(--color-text-secondary); font-weight: 400; white-space: nowrap;
				}
				.button:hover { background-color: var(--color-shape-tertiary); }
				.button.disabled { background: var(--color-shape-tertiary); max-width: 80px; }
			}
		}

		> #historySideRight.withButtons {
			.scroll { padding-bottom: 68px; }
		}

		> #historySideRight.withSidebar { border-right: 1px solid var(--color-shape-highlight-light); }
	}

	.blockLast { height: 100px; }
}

html.platformWindows {
	.pageMainHistory {
		#body {
			> #historySideLeft, > #historySideRight > .scroll { overflow-y: overlay; }
		}
	}
}
