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

	> .body {
		height: calc(100% - 52px); padding: 0px 6px 12px 12px; position: relative; flex-grow: 1; overflow: scroll; overscroll-behavior: none; 
		display: flex; flex-direction: column; gap: 12px 0px;
	}
	> .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); }
		}

		> .buttons { display: flex; justify-content: center; width: 100%; gap: 0px 8px; }
		> .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; }
			.button.grey { 
				box-shadow: 0px 0px; background: var(--color-shape-highlight-medium); border-radius: 6px; @include text-common; color: var(--color-text-primary); line-height: 26px; width: auto;
				padding: 0px 10px;
			}
		}

		> .dropTarget.firstTarget, 
		> .dropTarget.lastTarget 
		{ position: relative; }

		> .dropTarget.lastTarget { 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-system-accent-100); width: calc(100% - 28px); height: 2px; border-radius: 2px; left: 12px;
		}

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

		.widget.isEditable.isOver::before { 
			content: ""; position: absolute; background: var(--color-system-accent-100); 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 {
		> .buttons { position: sticky; bottom: 0px; left: 0px; padding: 0px 16px; }
		
		.widget:not(.isEditable) { opacity: 0.5; }
		.widget:not(.isEditable) {
			.dimmer { cursor: default; }
		}

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

		.widget.widgetSpace:hover {
			.side.left { width: 100%; }
			.side.right { display: none; }
		}

		.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.isListPreview { overflow: hidden; height: 100%; }
	> .body.isOnboardingHidden { visibility: visible; }
	> .body.withShareBanner:not(.isOnboardingHidden) { margin-top: -10px; }
}
