> .sidebarPage { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; }
> .sidebarPage {
	&.anim { transition: opacity 0.1s ease-in-out; }

	> .head { 
		display: flex; flex-direction: row; align-items: center; justify-content: space-between;
		@include text-paragraph; font-weight: 600; flex-shrink: 0; padding: 12px 16px;
	}
	> .head {
		.side { position: relative; z-index: 1; }
		.side.left { flex-grow: 1; }
		.side.right { flex-shrink: 0; display: flex; flex-direction: row; gap: 0px 8px; }

		.button, .icon { -webkit-app-region: no-drag; }

		.button.simple { @include text-common; font-weight: 500; color: var(--color-text-secondary); height: 28px; }
		.button.simple:hover { color: var(--color-text-primary); }

		.icon.close { background-image: url('~img/icon/close.svg'); }
		.icon.settings { background-image: url('~img/icon/sidebar/settings.svg'); }
		.icon.search { background-image: url('~img/icon/sidebar/search.svg'); }

		&::after {
			content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 88px; pointer-events: none; 
			background: linear-gradient(to bottom, var(--color-shape-tertiary) 0px, var(--color-shape-tertiary) 52px, rgba(0, 0, 0, 0) 100%); 
			opacity: 0; transition: opacity 0.2s ease-in-out;
		}
		&.isScrolled::after { opacity: 1; }
	}

	> .subHead { 
		display: flex; flex-direction: row; align-items: center; gap: 0px 12px; justify-content: stretch; padding: 0px 12px; position: relative; 
		margin: 0px 0px 4px 0px; height: 36px; flex-shrink: 0; z-index: 2;
	}
	> .subHead * { -webkit-app-region: no-drag; }
	> .subHead {
		.icon.back { background-size: 20px; }
		.icon.back:hover { background-image: url('~img/icon/widget/back1.svg'); }
		.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); }
		.icon.more:hover, .icon.more.hover { background-image: url('~img/icon/menu/action/more1.svg'); }
		.icon.create { background-image: url('~img/icon/widget/button/create.svg'); }
		.icon.arrow { width: 16px !important; background-size: 16px 20px !important; background-image: url('~img/icon/widget/button/arrow.svg'); }

		.cnt { 
			min-width: 18px; height: 18px; border-radius: 9px; background: var(--color-system-accent-125); @include text-very-small; 
			color: var(--color-text-inversion); text-align: center; display: flex; align-items: center; justify-content: center;
			padding: 0px 4px; cursor: default; flex-shrink: 0;
		}

		.side { flex-direction: row; display: flex; align-items: center; position: relative; z-index: 1; }
		.side.left { justify-content: center; flex-shrink: 0; }

		.side.center { flex-grow: 1; justify-content: flex-start; gap: 0px 6px; overflow: hidden; }
		.side.center {
			.iconObject { flex-shrink: 0; }
			.name { @include text-paragraph; @include text-overflow-nw; font-weight: 600; }
		}

		.side.right { flex-shrink: 0; justify-content: flex-end; }

		&::after {
			content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 88px; pointer-events: none; 
			background: linear-gradient(to bottom, var(--color-shape-tertiary) 0px, var(--color-shape-tertiary) 52px, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.2s ease-in-out;
		}
		&.isScrolled::after { opacity: 1; }
	}

	> .body {
		padding: 0px 12px 12px 12px; display: flex; flex-direction: column; gap: 12px 0px; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: none; 
		flex-grow: 1;
	}
	> .body {
		.group { display: flex; flex-direction: column; }
		.group {
			> .titleWrap { padding: 0px 4px 12px 4px; display: flex; flex-direction: row; gap: 0px 8px; align-items: center; justify-content: space-between; }
			> .titleWrap {
				.icon.withBackground { width: 24px !important; height: 24px !important; }
				.icon.plus { background-image: url('~img/icon/widget/plus0.svg'); }

				.side.left { display: flex; flex-direction: row; gap: 0px 4px; align-items: center; }
				.side.right { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }

				.label { @include text-paragraph; font-weight: 600; }

				&.withToggle { padding-bottom: 0px; }
				&.withToggle { 
					.side.right { opacity: 0; transition: opacity 0.2s $easeInQuint; }
					.label { font-weight: 500; @include text-common; color: var(--color-text-secondary); display: flex; flex-direction: row; align-items: center; gap: 0px 4px; }
					
					.label::before { 
						content: ''; width: 20px; height: 20px; background-image: url('~img/icon/widget/collapse0.svg'); transform: rotateZ(-90deg);
						transition: $transitionAllCommon;
					}
					&.isOpen {
						.side.right { opacity: 1; }
						.label::before { transform: rotateZ(0deg); }
					}
				}

				.icon.question { background-image: url('~img/icon/sidebar/question.svg'); }
			}

			> .list { display: flex; flex-direction: column; gap: 8px 0px; }
			> .list {
				&.anim { transition: height 0.2s $easeInQuint; }
				&.withToggle { overflow: hidden; height: 0px; }

				> .empty { padding: 13px 4px; color: var(--color-text-tertiary); }
			}
		}
	}

	.section { background: var(--color-bg-primary); border-radius: 12px; padding: 8px 0px; }
	.section {
		.titleWrap { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: 0px 0px 8px 0px; padding: 0px 8px 0px 16px; }
		.titleWrap {
			.icon.withBackground { width: 24px !important; height: 24px !important; }
			.icon.plus { background-image: url('~img/icon/widget/plus0.svg'); }
		}

		.title { @include text-paragraph; font-weight: 600; }
		.label { padding: 5px 16px; @include text-small; font-weight: 500; color: var(--color-text-secondary); }

		.sectionNameWrap { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 5px 12px 5px 16px; gap: 0px 8px; }
		.sectionNameWrap {
			.side.left { display: flex; flex-direction: row; align-items: center; gap: 0px 4px; }
			.side.right { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }

			.label { padding: 0px; flex-grow: 1; }
			.icon { flex-shrink: 0; width: 24px !important; height: 24px !important; }
			.icon.question { background-image: url('~img/icon/sidebar/question.svg'); }
			.icon.more { background-image: url('~img/icon/menu/action/more0.svg'); }
			.icon.more:hover { background-color: unset; background-image: url('~img/icon/menu/action/more1.svg'); }
		}

		.items { padding: 0px 8px; }

		.item { 
			padding: 3px 8px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: relative; 
			background-color: var(--color-bg-primary); border-radius: 6px;
		}
		.item.isDragging { z-index: 2; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); }

		.item {
			.name { flex-shrink: 0; }
			.tabSwitch { width: 100%; margin-bottom: 11px; }

			.value { overflow: hidden; }
			.value.flex { flex-direction: row; align-items: center; justify-content: space-between; gap: 0px 8px; }

			.select { border: 0px; color: var(--color-text-secondary); display: flex; padding-top: 0px; padding-bottom: 0px; }
			.select {
				.item { @include text-overflow-nw; }
				.item {
					.icon { display: none; }
				}
			}

			.icon.more { display: none; }

			.input-drag-horizontal { width: 96px; height: 16px; box-shadow: 0px 0px 0px 1px var(--color-shape-primary) inset; border-radius: 8px; overflow: hidden; }
			.input-drag-horizontal {
				.back { height: calc(100% - 2px); margin: 0px 0px 0px -1px; top: 1px; background: var(--color-shape-tertiary); border-radius: 0px 8px 8px 0px; }
				.fill { height: calc(100% - 2px); margin: 0px 0px 0px 1px; top: 1px; border-radius: 8px 0px 0px 8px; background: var(--color-bg-primary); }
				.icon { width: 16px; height: 16px; border-radius: 0px; border: 0px; }
				.bullet { width: 100%; height: 100%; border-radius: 50%; background: var(--color-bg-primary); border: 1px solid var(--color-shape-primary); }
			}

			&:hover, &.active {
				.icon.more { display: block; }
			}
		}

		&.empty { text-align: center; }
	}

}

@import "./page/type.scss";
@import "./page/vault.scss";
@import "./page/widget.scss";
@import "./page/settings.scss";
@import "./page/object/relation.scss";
@import "./page/object/tableOfContents.scss";
@import "./page/bottom.scss";