> .sidebarPage.pageWidget { height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; flex-shrink: 0; }
> .sidebarPage.pageWidget {
	> .head { 
		display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0px 12px; height: 52px;
		gap: 0px 8px; flex-shrink: 0; position: relative; z-index: 2;
	}
	> .head {
		.name { 
			@include text-overflow-nw; opacity: 0; transform: translate3d(0px,30px,0px); transition: all 0.2s $easeInQuint; 
			max-width: calc(100% - 88px); display: none;
		}
	}
	> .head.show {
		.name { opacity: 1; transform: translate3d(0px,0px,0px); }
	}

	> .subHead {
		.icon.more { background-image: url('~img/icon/widget/button/more.svg'); }
		.icon.expand { background-image: url('~img/icon/widget/button/expand.svg'); }
	}

	.widgetSection { display: flex; flex-direction: column; }
	.widgetSection {
		> .nameWrap { display: flex; @include text-small; font-weight: 500; color: var(--color-text-secondary); justify-content: space-between; }
		> .nameWrap {
			.icon.arrow { width: 12px; height: 12px; background-image: url('~img/arrow/widgetSection0.svg'); transform: rotateZ(-90deg); }
			.icon.plus { width: 12px; height: 12px; background-image: url('~img/icon/plus/widgetSection0.svg'); }

			.name { display: flex; flex-direction: row; align-items: center; gap: 0px 6px; padding: 5px 0px; transition: color $transitionCommon; }
			.name {
				&:hover { color: var(--color-text-primary); }
				&:hover {
					.icon.arrow { background-image: url('~img/arrow/widgetSection1.svg'); }
				}
			}

			.buttons { 
				display: flex; flex-direction: row; gap: 0px 4px; align-items: center; justify-content: flex-end; opacity: 0; 
				transition: opacity $transitionCommon;
			}
			.buttons {
				.button.blank { border: 0px; padding: 5px 0px; @include text-small; color: var(--color-text-secondary); font-weight: 500; }
				.button.blank {
					&:hover { background: none; color: var(--color-text-primary); }
					&:hover {
						.icon.plus { background-image: url('~img/icon/plus/widgetSection1.svg'); }
					}
				}						
			}

			&:hover {
				.buttons { opacity: 1; }
			}
		}

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

			.widget:first-child { margin-top: 8px; }
			.widget:last-child { margin-bottom: 8px; }
		}

		&.isOpen {
			> .nameWrap .icon.arrow { transform: rotateZ(0deg); }
		}
	}

	> .body { padding: 0px 0px 68px 0px; position: relative; flex-grow: 1; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: none; }
	> .body {
		@keyframes shake1 {
			0% { transform: rotate(-0.5deg); }
			100% { transform: rotate(0.5deg); }
		}

		@keyframes shake2 {
			0% { transform: rotate(0.5deg); }
			100% { transform: rotate(-0.5deg); }
		}

		> .content { display: flex; flex-direction: column; gap: 2px 0px; padding: 0px 6px 0px 12px; }
		> .content {

			.dropTarget.firstTarget { position: sticky; left: 0px; top: 0px; z-index: 1; box-shadow: 0px 1px var(--color-shape-tertiary); background: var(--color-shape-tertiary); }
			.dropTarget.firstTarget {
				&::after {
					content: ''; position: absolute; left: 0px; bottom: -45px; width: 100%; height: 55px; pointer-events: none; 
					background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, var(--color-shape-tertiary) 68.18%); opacity: 0; transition: opacity 0.2s ease-in-out;
				}
				&.isScrolled::after { opacity: 1; }
			}

			.dropTarget.lastTarget { position: relative; display: flex; flex-direction: column; gap: 12px 0px; }

			.dropTarget.firstTarget.isOver, 
			.dropTarget.lastTarget.isOver 
			{ box-shadow: 0px 0px !important; }

			.dropTarget.firstTarget.isOver::before, 
			.dropTarget.lastTarget.isOver::before { 
				content: ""; position: absolute; background: var(--color-control-accent); width: calc(100% - 28px); height: 2px; border-radius: 2px; left: 12px;
			}

			.dropTarget.firstTarget.isOver::before { bottom: -7px; }
			.dropTarget.lastTarget.isOver::before { top: -7px; }
		}

		#widget-chat { margin: 0px 0px 8px 0px; }

		.widget.isEditable.isOver::before { 
			content: ""; position: absolute; background: var(--color-control-accent); height: 2px; width: calc(100% - 24px); border-radius: 2px; 
			left: 12px; 
		} 
		.widget.isEditable.isOver.top::before { top: -7px; }
		.widget.isEditable.isOver.bottom::before { bottom: -7px; }
	}

	> .body.isEditing {
		.section-pin {
			.widget:not(.isEditable) { opacity: 0.5; }
			.widget:not(.isEditable) {
				.dimmer { cursor: default; }
			}

			.widget {
				.icon.remove { display: block; }
			}
			.widget {
				.dimmer { display: block; }
			}

			.widget.isEditable:nth-child(2n + 1) { animation: shake1 0.2s linear infinite alternate; }
			.widget.isEditable:nth-child(2n + 2) { animation: shake2 0.2s linear infinite alternate; }
			.widget.isEditable:hover {
				.head {
					> .buttons { display: flex; }
					.iconWrap.options { display: none; }
				}
			}

			.widget.button { cursor: default; animation: none; }
		}
	}

	> .body.isOnboardingHidden { visibility: visible; }
	> .body.isListPreview { overflow: hidden; padding: 0px 12px 12px 12px; }

	.spaceHeader { padding-bottom: 8px; }
	.spaceHeader {
		.spaceInfo { margin-bottom: 18px; display: flex; flex-direction: column; align-items: center; }
		.spaceInfo {
			.iconObject { margin-bottom: 8px; }
			.name { @include text-header3; margin-bottom: 0px; }
			.label { @include text-small; color: var(--color-text-secondary); }
		}

		.buttons { display: flex; justify-content: center; }
		.buttons {
			.item { width: 72px; text-align: center; display: flex; flex-direction: column; gap: 5px 0px; align-items: center; }
			.item {
				.icon {
					width: 48px; height: 48px; border-radius: 50%; background-color: var(--color-shape-highlight-medium);
					background-position: 50% 50%; background-repeat: no-repeat; background-size: 28px; transition: background-color $transitionCommon;
				}
				.icon.chat { background-image: url('~img/icon/sidebar/chatSpace/chat.svg'); }
				.icon.mute.on { background-image: url('~img/icon/sidebar/chatSpace/pushOn.svg'); }
				.icon.mute.off { background-image: url('~img/icon/sidebar/chatSpace/pushOff.svg'); }
				.icon.settings { background-image: url('~img//icon/sidebar/chatSpace/settings.svg'); }

				.label { @include text-small; @include text-overflow-nw; width: 100%; padding: 0px 2px; }
			}
			.item:hover {
				.icon { background-color: var(--color-shape-highlight-dark); }
			}
		}
	}
}