> .sidebarPage { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; }
> .sidebarPage {
	.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 {
		.side.left { flex-grow: 1; }
		.side.right { flex-shrink: 0; display: flex; flex-direction: row; gap: 0px 8px; }

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

	.body {
		padding: 0px 12px 12px 12px; overflow: scroll; display: flex; flex-direction: column; gap: 12px 0px; overscroll-behavior: none; 
		scrollbar-gutter: stable both-edges; 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/collapse.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/object.scss";
