// CMS Core Layout

//------------------------------------------------------------------------------
// Dev mode activates various helpers to make life easier for you
// Will display a box at the bottom of the view that shows various helpful bits
// MAKE SURE THIS IS SET TO 'false' FOR PRODUCTION!

$devmode: false;

//------------------------------------------------------------------------------
// Blazer Core Assets

@import 'blazer-core';

//------------------------------------------------------------------------------
// Import Custom Theme
// Custom themes override the default theme
// To create a template, use the default theme as a base
//
// Suggestion: Only specify one theme at a time, unless you want to
// create "mini-themes" that only apply to specific elements.

@import 'global/theme';


// -----------------------------------------------------------------------------
// Edlio CMS Layout

.edlio.cms {
	@include blazer-init;

	// Import header, header navigation, and footer styles
	@import 'partials/header';
	@import 'partials/navigation';

	// Feature UI Core Layout
	main {

		padding-top: 3.125em !important;

		> header {

			border-bottom: 1px solid $grey-n08;
			background-color: $grey-n00;

			padding: .382em 0;

			@include min-screen-size(large) {
				padding: 0;
				border: 1px solid $grey-n03;
				background-color: transparent;
			}

			.width-constraint {
				position: relative;

				a.back {
					@extend %flexbox;
					@include align-items(center);

					position: absolute;
					top: 0;

					height: 100%;
					vertical-align: middle;

					@include min-screen-size(large) {
						display: none;
					};

					.icon {
						width: 1.5em;
						height: 1.5em;
					}
				}

				h1 {
					color: $grey-n10;
					margin: 0;

					text-align: center;

					@include min-screen-size(large) {
						padding-top: 0;
						line-height: 2em;
						text-align: left;
					}
				}
			}
		}

		// Full screen-width toolbars

		.bar {
			display: block;

			margin: 0;
			padding: {
				top: 1em;
				bottom: 1em;
			}

			&.tab {
				padding-bottom: 0;

				@include max-screen-size(medium) {

					> * {
						box-shadow: inset 0 1px 0 0 $default-divider-color;

						&.selected {
							box-shadow: none;

							+ * {
								box-shadow: none;
							}
						}

						&:first-of-type {
							box-shadow: none;
						}
					}

					.width-constraint {
						@include flexbox;
						@include flex-direction(column);
						margin: 0;

						padding: {
							right: 0 !important;
							left: 0 !important;
						}
					}
				}
			}

		}

		> .content {
			@extend %width-constraint;
			padding-top: 2em;

			.sidebar {
				@include layout-cell(one-quarter, -1);

				&.right {
					@include layout-cell(one-quarter, 99);
				}
			}

			.bar {
				@extend %flexbox;
				background: transparent;
			}

		}

		.workspace {
			margin-bottom: 0;
		}

		// Hide breadcrumbs on small screens
		.breadcrumb {
			@include max-screen-size(small) {
				@include hide;
			}
		}

	}

	.button {
		@include max-screen-size(small) {

			&:not(.icon),
			&.labeled.icon {
				display: block;
				margin-right: 0;
			}

		}
	}

	.uniform-component-attributes {
		display: block;
		white-space: pre-line;
		width: 100%;
		margin-bottom: 2em;

		var {
			font-weight: bold;
		}
	}

}