@import "~scss/_mixins";

.pageFlex { display: flex; flex-direction: row; justify-content: stretch; width: 100% !important; transition: transform 0.2s $easeInQuint; }
.pageFlex {
	.sidebarDummy { flex-shrink: 0; }
	#page { width: 100%; position: relative; }
}

.sidebarAnimation { transition: width $transitionSidebarTime linear; }

#sidebarToggle, 
#sidebarSync { position: fixed; top: 12px; z-index: 22; -webkit-app-region: no-drag; transition: none; }

#sidebarToggle { backdrop-filter: blur(20px); left: 84px; background-image: url('~img/icon/widget/toggle0.svg'); }
#sidebarToggle.sidebarAnimation, #sidebarSync.sidebarAnimation { transition: left $transitionSidebarTime linear; }
#sidebarToggle:hover, #sidebarToggle.hover { background-color: var(--color-shape-highlight-medium) !important; background-image: url('~img/icon/widget/toggle1.svg'); }

.sidebar { position: fixed; z-index: 21; user-select: none; transition: none; top: 0px; height: 100%; background-color: var(--color-shape-tertiary); }
.sidebar.anim { transition-duration: $transitionSidebarTime; transition-timing-function: linear; }
.sidebar.isClosed { left: 0px !important; overflow: hidden; }

.sidebar.left { left: 0px; }
.sidebar.left.withVault { left: $vaultWidthCollapsed; }
.sidebar.left.anim { transition-property: width; }

.sidebar.right { right: -$sidebarRightWidth; width: $sidebarRightWidth; flex-shrink: 0; }
.sidebar.right.anim { transition-property: right; }

.sidebar.withPreview { z-index: 31; }

.sidebar.right {
	@import "./sidebar/preview";
}

.sidebar {
	@import "./sidebar/widget";
	@import "./sidebar/object";
	@import "./sidebar/page";
	@import "./sidebar/settings";
	
	.resize-h { width: 10px; height: 100%; cursor: col-resize; z-index: 2; flex-shrink: 0; position: absolute; right: -5px; top: 0px; }
	.resize-h {
		.resize-handle {
			position: absolute; left: 6px; top: 50%; margin: -16px 0px 0px 0px; transition: $transitionAllCommon;
			width: 12px; height: 32px;
		}
		.resize-handle::after {
			content: ''; position: absolute; left: 6px; top: 0px; width: 6px; height: 100%; background-color: var(--color-shape-secondary);
			border-radius: 3px; opacity: 0; transition: $transitionAllCommon;
		}
	}
	.resize-h:hover, .resize-h:active {
		.resize-handle::after { opacity: 1; }
	}
	.resize-h:active {
		.resize-handle { height: 64px; margin-top: -32px; }
	}
	.resize-handle:hover::after, .resize-handle:active::after { background-color: var(--color-shape-primary); }

	.loaderWrapper { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
}

html.platformWindows {
	.sidebar {
		> .containerWidget > .body { overflow-y: overlay; }
	}
}	
