.cms-content__inner {
  height: 100%;
}
.cms-content__right,
.cms-content__left {
  height: 100%;
  overflow: hidden;
  background-color: $body-bg;
  transition: width .2s;
}
.panel-scrollable {
  height: calc(100% - #{$toolbar-total-height});
  overflow-y: auto;
}

// .cms-content can be split into different left/right zones
// Exampale modifier: --left-sm = small left side panel with right panel width set to auto.
.cms-content__split {
  height: 100%;
}
.cms-content__split--left-sm {
  .cms-content__right {
    position: relative;
    border-left: 1px solid $border-color;
  }
  .cms-content__left {
    width: 100%;
    position: absolute;
    left: 0;
  }
  @media (min-width: 992px) { /* lg */
    padding-left: $cms-panel-sm;

    .cms-content__left {
      width: $cms-panel-sm;
    }
  }
  @media (min-width: 1200px) { /* xl */
    padding-left: $cms-panel-md;

    .cms-content__left {
      width: $cms-panel-md;
    }
  }
}


// TOOLBARS
.toolbar {
	width: 100%;        						// Todo: replace with mixin @include make-container();
	height: $toolbar-total-height;
	background-color: $body-bg;

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

// Northern bar containing breadcrum, tabs etc.
.toolbar--north {
	@extend .toolbar;
	padding-left: $spacer-x;				// Todo: replace with mixin @include make-container();
	padding-right: $spacer-x;				// Todo: replace with mixin @include make-container();
	display: block;
	background-image: none;
	background-color: $background-north;
	border-bottom: 1px solid $border-color;
	z-index: 60;
}

// Secondary content actions eg. Add page button
.toolbar--content {
	@extend .toolbar;
	padding: $spacer-y*.625 $spacer-x*.75;
	margin-bottom: $spacer-y/2;
}

// Primary content actions
.toolbar--south {
	@extend .toolbar;
	padding: $spacer-y*.625 $spacer-x;
	position: absolute;
	bottom: 0;
	border-top: 1px solid $border-color;
}