// -------------------------------------------------------------------
// :: MAIN
// -------------------------------------------------------------------

$sidebar-min-width: 350px;

.o-main {

	.o-header__toggle_mobile_nav {
		display: block;
		width: 24px;
		height: 20px;
		position: absolute;
		top: 20px;
		right: 20px;

		.top,
		.middle,
		.bottom {
			position: absolute;
			display: block;
			background: $dark-extra;
			height: 2px;
			width: 100%;
			transition: all 0.2s ease-in-out;
			transform-origin: center center;
		}

		.middle {
			transform: translate(0, 9px);
		}

		.bottom {
			transform: translate(0, 19px);
		}

		&--close {
			.top {
				transform: translate(0, 10px) rotate(45deg);
			}

			.middle {
				opacity: 0;
			}

			.bottom {
				transform: translate(0, 10px) rotate(-45deg);
			}
		}

	}

	@include FLOW-to($desktop){

		.o-main__header {
			.o-main__header__actions {
				position: absolute;
				top: $logo-height + 20px;
				right: $grid-gutter-width/2;
				left: $grid-gutter-width/2;

				.a-button:not(.o-main__header__actions__showhidenotes) {
					padding: 0;
					width: 42px;
					height: 42px;
					border-radius: 42px;
				}

				.a-button span {
					display: none;
				}

				.a-button span[class*="icon"] {
					display: inline-block;
				}

				.o-main__header__actions__showhidenotes {
					float: right;

					span {
						display: inline-block;
					}
				}
			}
		}

		.o-header__sidebar {
			.o-header__sidebar__section_title {
				display: none;
			}

			.o-header__sidebar__bottom,
			.o-header__sidebar__nav {
				list-style: none;
				padding: 0 rem($grid-gutter-width/2);
				margin: 0;
			}


			.o-header__sidebar__nav_item {
				color: $dark-extra;
				text-decoration: none;
				font-size: rem(20px);
				display: block;
				border-bottom: 1px solid darken($light, 10%);
				padding: rem(10px) 0;

				span[class*="icon"] {
					display: none;
				}
			}

		}
	}


	@include FLOW-at($desktop) {

		.o-header__toggle_mobile_nav {
			display: none;
		}

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-content: stretch;

		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.o-header {
			flex: 0 0 206px;
		}

		.o-main__header {
			position: fixed;
			left: 206px;
			right: 0;
		}

		.o-main__body {
			width: 100%;
			align-content: stretch;
			overflow-y: auto;

			.o-main__header {
				.o-main__header_internal {
					margin: 0 auto;
					padding: 0 rem(1.5*$grid-gutter-width);
					position: relative;

					.o-main__header__title {
						float: left;
					}

					.o-main__header__actions {
						position: absolute;
						top: 0; //rem($grid-gutter-width/2);
						right: rem($grid-gutter-width/2);
					}

				}
			}

			.o-main__content {
				flex: 0 1 100%;
				display: flex;
				flex-direction: row;
				align-content: stretch;
				padding-top: 71px;

				.o-main__content_container {
					flex: 0 1 100%;
					padding-top: rem($grid-gutter-width);
					padding-bottom: rem($grid-gutter-width*2);

					.container-fluid {
						padding-left: rem(1.5*$grid-gutter-width);
						padding-right: rem(1.5*$grid-gutter-width);
						max-width: 1440px;
						margin: 0 auto;
					}
				}

				.o-main__sidebar {
					width: rem($sidebar-min-width);
					flex: 0 0 rem($sidebar-min-width);
					background: $light;
					align-content: stretch;
					min-height: calc(100vh - 71px);
				}
			}

			&--sidebar {

				@include FLOW-at($desktop) {
					.o-main__header {
						.o-main__header_internal {
							max-width: none;

							.o-main__header__actions {

								@include FLOW-to($desktop) {

									.a-button {
										padding-left: 0;
										padding-right: 0;
										width: 2.625rem;
										height: 2.625rem;
										border-radius: 100% !important;
									}

									.a-button span {
										display: none;
									}

									.a-button span[class*="icon"] {
										display: inline-block;
									}
								}

								@include FLOW-at($desktop-xl) {
									right: rem($sidebar-min-width + $grid-gutter-width/2);
								}
							}
						}
					}

					.o-main__content {
						.o-main__content_container {

							.container-fluid {
								max-width: none;
							}
						}
					}
				}
			}


		}

	}
}

.o-main__header__title {
	position: relative;

	@include FLOW-to($tablet) {
		width: calc(100vw - 80px);
	}

	@include FLOW-at($tablet) {
		width: calc(100vw - 250px - 38px);
	}

	a:not(.a-button--icon) {
		text-decoration: none;
		color: $dark-extra;

		span[class*='icon']:first-child {
			display: block;
			background: $light-extra;
			font-size: 0.9375rem;
			line-height: 2.5rem;
			width: 2.625rem;
			height: 2.625rem;
			border-radius: 100%;
			border: 1px solid $dark;
			text-align: center;
			vertical-align: top;
			transition: all 0.1s ease-in-out;
			float: left;
			margin-right: 1rem;
		}

		span.label {
			display: inline-block;
			line-height: 1.2;
			margin-top: rem(7px);
		}

		&:hover {
			span[class*='icon'] {
				background-color: $medium;
			}

			span.label {
				opacity: 0.8;
			}
		}
	}
}

.o-main__header__edit {
	position: absolute;
	top: 20px;
	right: rem($grid-gutter-width);

	@include FLOW-at($tablet) {
		right: 14.5rem;
	}

	@include FLOW-at($desktop) {
		top: 0;
		right: rem($grid-gutter-width);
	}
}

.o-main__header_internal {
	.a-button--icon {
		display: inline;
		margin-left: 1rem;
	}
}

// show/hide sidebar notes
.o-main__body {

	&.o-main__body--sidebar {

		@include FLOW-to($desktop) {
			position: fixed;
			overflow: hidden;
		}

		.o-main__header__actions__showhidenotes {
			display: none;
		}

		.o-main__sidebar {
			transform: translate(0, 0);
		}
	}

	&.o-main__body--sidebar,
	&.o-main__body--sidebar-hidden {
		.o-main__header_internal {
			margin-bottom: 3*$grid-gutter-width;
		}
	}

	.o-main__sidebar {
		transition: transform 0.5s ease-in-out;
		transform: translate(100vh, 0);

		@include FLOW-to($desktop) {
			box-shadow: 0 40px 80px rgba($dark-extra, 0.2);
		}
	}

	.o-main__content {
		overflow-x: hidden;
	}

	@include FLOW-to($desktop) {
		.o-main__sidebar {
			position: fixed;
			top: 72px;
			right: 0;
			left: 0;
			bottom: 0;
			z-index: $z-index-higher;
			background: $light;
			padding: $grid-gutter-width/2;
			overflow-y: auto;

			.m-notes__close {
				top: $grid-gutter-width/2;
				right: $grid-gutter-width/2;
			}
		}
	}
}

.o-main__header {
	position: relative;
	min-height: rem($logo-height);
	padding: rem(20px) 0 0;
	background: $gradient-light;
	z-index: $z-index-high;

	.o-main__header_internal {
		padding: 0 rem($grid-gutter-width/2);
		margin: 0 auto rem($grid-gutter-width);
		max-width: 1440px;
	}

	&:before,
	&:after {
		content: "";
		display: block;
		left: 0;
		right: 0;
		height: 1px;
		background: $medium;
		position: absolute;
		transform-origin: center;
		bottom: -8px;
	}

	&:before {
		background: $green;
		transform: rotate(-0.5deg);
	}

	&:after {
		transform: rotate(0.5deg);
	}

	@include FLOW-to($desktop){

		.o-main__header__actions {
			position: absolute;
			top: $logo-height + 20px;
			right: $grid-gutter-width/2;
			left: $grid-gutter-width/2;

			.a-button:not(.o-main__header__actions__showhidenotes) {
				padding: 0;
				width: 42px;
				height: 42px;
				border-radius: 42px;
			}

			.a-button span {
				display: none;
			}

			.a-button span[class*="icon"] {
				display: inline-block;
			}

			.o-main__header__actions__showhidenotes {
				float: right;

				span {
					display: inline-block;
				}
			}
		}
	}


	@include FLOW-at($desktop) {
		.o-main__header_internal {
			max-width: none;

			.o-main__header__actions {

				@include FLOW-to($desktop) {

					.a-button {
						padding-left: 0;
						padding-right: 0;
						width: 2.625rem;
						height: 2.625rem;
						border-radius: 100% !important;
					}

					.a-button span {
						display: none;
					}

					.a-button span[class*="icon"] {
						display: inline-block;
					}
				}

				@include FLOW-at($desktop-xl) {
					right: rem($sidebar-min-width + $grid-gutter-width/2);
				}
			}
		}
	}

	.o-main__header_internal {
		margin: 0 auto;
		padding: 0 rem(1.5*$grid-gutter-width);
		position: relative;

		.o-main__header__title {
			float: left;

			@include FLOW-to($desktop) {
				margin-left: rem(-30px);
			}
		}

		.o-main__header__actions {
			position: absolute;
			top: rem($grid-gutter-width*2.5);
			right: rem($grid-gutter-width/2);
		}

	}
}