.cms-middle {
	padding-left: 0;
	height: 100%;
	position: relative;
	transition: padding .2s;

	&.with-preview {
		@media (min-width: 992px) { /* lg */
			padding-left: 316px;
			.cms-campaigns {
				width: 316px;
			}
		}
		@media (min-width: 1200px) { /* xl */
			padding-left: 448px;
			.cms-campaigns {
				width: 448px;
			}
		}
	}
}

.cms-middle__scrollable {
	overflow-y: auto;
	display: block;
	height: 100%;
}

// Preview panel
.pages-preview {
	display: block;
	position: relative;
	background-color: #BBB;
	border-left: 1px solid #dbdde0;
	height: 100%;

	iframe {
		width: 100%;
		height: calc(100% - #{$toolbar-total-height});
		border: none;
	}
}

// Toolbars
// Todo: Convert toolbar to a component with variations.
.toolbar {
	width: 100%;        // Todo: should use mixin @include make-container();
	height: $toolbar-total-height;
	padding: $spacer-y*.625 $spacer-x;
	background-color: $body-bg;

	.btn-toolbar {
		// TODO Remove '.cms .btn-toolbar' override
		margin-top: 0;
		margin-bottom: 0;
	}
}

.content-toolbar {
	@extend .toolbar;
	margin-bottom: $spacer-y/2;
}

.cms-south-actions {
	@extend .toolbar;
	position: absolute;
	bottom: 0;
	border-top: 1px solid $border-color;
}