$selector: '.page-editor__layout-viewport';

html#{$cadmin-selector} #{$selector} {
	align-items: stretch;
	display: flex;
	justify-content: center;
	position: relative;

	&:not(.page-editor__layout-viewport--size-desktop) {
		background-color: $cadmin-gray-400;
	}

	#{$selector}__resizer {
		background-color: var(--body-bg);
	}

	&--size {
		&-tablet,
		&-landscapeMobile,
		&-portraitMobile {
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			transition: margin-left ease $defaultTransitionDuration,
				margin-right ease $defaultTransitionDuration;
			width: 100%;
			will-change: margin-left, margin-right;
			z-index: 1;

			&#{$selector}--with-sidebar-open {
				#{$selector}__label-width {
					right: $defaultSidebarContentWidth;
				}

				@include media-breakpoint-up(sm) {
					padding-left: $sidebarButtonWidth +
						$defaultSidebarContentWidth;
				}
			}

			&#{$selector}--with-item-configuration-open {
				#{$selector}__label-width {
					right: $defaultSidebarContentWidth;
				}

				@include media-breakpoint-up(sm) {
					margin-right: $defaultSidebarContentWidth;
				}
			}
		}

		&-desktop #{$selector}__resizer {
			flex-grow: 1;
		}

		&-tablet #{$selector}__resizer {
			max-width: minmax(991px, 100%);
			min-width: minmax(768px, 100%);
			width: 768px;
		}

		&-landscapeMobile #{$selector}__resizer {
			max-width: minmax(767px, 100%);
			min-width: minmax(576px, 100%);
			width: 576px;
		}

		&-portraitMobile #{$selector}__resizer {
			max-width: minmax(575px, 100%);
			min-width: minmax(240px, 100%);
			width: 360px;
		}
	}

	#{$selector}__label-width {
		margin-top: 12px;
		position: absolute;
		right: 0;
		z-index: 1;

		span {
			background-color: $cadmin-gray-800;
			border-radius: 4px;
			color: $cadmin-light-l2;
			font-size: 14px;
			font-weight: 600;
			margin-right: 16px;
			padding: 6px 12px;
		}
	}

	#{$selector}__handle {
		background-color: $cadmin-gray-400;
		cursor: col-resize;
		position: relative;
		width: 16px;

		&:active,
		&:hover {
			background-color: $cadmin-gray-500;
		}

		&:before,
		&:after {
			border: 1px solid $cadmin-secondary;
			border-radius: 2px;
			content: '';
			height: 20px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}

		&:before {
			left: calc(50% - 3px);
		}

		&:after {
			left: calc(50% + 1px);
		}
	}

	&__resizing {
		cursor: col-resize;

		#{$selector}__resizer {
			pointer-events: none;
		}
	}
}
