// /**
//  * Copyright © 2013-2017 Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

@layout-column-main__sidebar-offset: 2%;
@layout-column__additional-sidebar-offset: @layout-column-main__sidebar-offset;

//
//  Common
//  _____________________________________________

& when (@media-common =true) {
	.cms-index-index {

		#maincontent>.columns,
		main.page-main {
			max-width: 100vw !important;
			padding-left: 0;
			padding-right: 0;
		}

		.section-builder-full .frame,
		#maincontent .section-builder-full .frame {
			max-width: 100vw !important;
			padding-left: 15px;
			padding-right: 15px;

			&.no-padding {
				padding: 0 !important;
			}
		}
	}

	.columns {
		#lib-layout-columns();

		.column.main {
			&:extend(.abs-add-box-sizing all);
			.lib-css(padding-bottom, 0);
			.lib-vendor-prefix-flex-basis(100%);
			.lib-vendor-prefix-flex-grow(1);
			.lib-vendor-prefix-order(1);
		}

		.sidebar-main {
			&:extend(.abs-add-box-sizing all);
			.lib-vendor-prefix-flex-grow(1);
			.lib-vendor-prefix-flex-basis(100%);
			.lib-vendor-prefix-order(1);
		}

		.sidebar-additional {
			&:extend(.abs-add-box-sizing all);
			.lib-vendor-prefix-flex-grow(1);
			.lib-vendor-prefix-flex-basis(100%);
			.lib-vendor-prefix-order(2);

			@media (max-width: 767px) {
				margin-top: 50px;
			}
		}
	}

	.page {
		&-wrapper {
			width: 100%;
		}

		&-main>.columns {
			margin-left: auto;
			margin-right: auto;
			padding-left: 15px;
			padding-right: 15px;
		}
	}

	.frame,
	.page-main>.columns,
	.breadcrumbs .items {
		max-width: 1200px;
		margin: auto;
		box-sizing: border-box;
	}

	.page-title-wrapper,
	.breadcrumbs .items,
	.frame {
		padding-left: 15px;
		padding-right: 15px;
	}

	body {
		@media (min-width: 1200px) {
			&.width1024 {

				.frame,
				.page-main,
				.breadcrumbs .items,
				.page.messages .messages,
				.page-wrapper>.breadcrumbs {
					max-width: 1024px;
				}
			}

			&.width1366 {

				.frame,
				.page-main,
				.breadcrumbs .items,
				.page.messages .messages,
				.page-wrapper>.breadcrumbs {
					max-width: 1366px;
				}
			}
		}

		&.fullwidth {

			.frame,
			.page-main,
			.breadcrumbs .items,
			.page.messages .messages,
			.page-wrapper>.breadcrumbs {
				max-width: 100% !important;
			}
		}

		.page-main>.columns {
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			box-sizing: border-box;
		}

		&.page-layout {
			&-1column {

				.sidebar.sidebar-main,
				.sidebar.sidebar-additional,
				.columns .column.main {
					-ms-flex: 0 0 100%;
					flex: 0 0 100%;
					max-width: 100%;
				}
			}

			@media (min-width: 992px) {
				&-2columns {

					&-left,
					&-right {
						.page-main>.columns {
							display: block !important;

							&:after {
								content: "";
								display: table;
								clear: bottom;
							}

							.column.main {
								width: calc(~'75% - 15px');
								float: right;
							}

							.sidebar {

								&.sidebar-main,
								&.sidebar-additional {
									width: calc(~'25% + 15px');
									padding: 0 30px 0 0;
									float: left;
								}
							}
						}
					}

					&-right {
						.page-main>.columns {
							.column.main {
								float: left;
							}

							.sidebar {

								&.sidebar-main,
								&.sidebar-additional {
									float: right;
									padding: 0 0 0 30px;
								}
							}
						}
					}
				}

				&-3columns {
					.columns .column.main {
						-ms-flex: 0 0 calc(~'50% - 30px');
						flex: 0 0 calc(~'50% - 30px');
						max-width: calc(~'50% - 30px');
					}

					.sidebar {

						&.sidebar-main,
						&.sidebar-additional {
							-ms-flex: 0 0 calc(~'25% + 15px');
							flex: 0 0 calc(~'25% + 15px');
							max-width: calc(~'25% + 15px');
						}

						&.sidebar-main {
							padding: 0 30px 0 0;
						}

						&.sidebar-additional {
							padding: 0 0 0 30px;
						}
					}
				}
			}

			@media (max-width: 991.98px) {

				&-3columns,
				&-2columns-left,
				&-2columns-right {
					.columns {

						.sidebar.sidebar-additional,
						.sidebar.sidebar-main,
						.column.main {
							-ms-flex: 0 0 100%;
							flex: 0 0 100%;
							max-width: 100%;
							padding: 0;
						}
					}
				}
			}
		}
	}

	body.boxed:not(.fbuilder-create-element) {
		&.width1024>.page-wrapper {
			max-width: 1024px;

			@media (max-width: 1084px) {
				max-width: calc(~'100% - 60px');
			}
		}

		&.width1200>.page-wrapper {
			max-width: 1200px;
			background-color: #fff;
			margin: 30px auto;
			position: relative;
			padding: 0 30px;

			@media (max-width: 1260px) {
				max-width: calc(~'100% - 60px');
			}

			@media (max-width: 767px) {
				max-width: calc(~'100% - 30px');
				padding: 0 15px !important;
				margin: 0 auto !important;
			}
		}

		&.width1366>.page-wrapper {
			max-width: 1366px;

			@media (max-width: 1426px) {
				max-width: calc(~'100% - 60px');
			}
		}

		&.fullwidth>.page-wrapper {
			max-width: calc(~'100% - 60px') !important;

			@media (max-width: 575px) {
				max-width: calc(~'100% - 30px') !important;
			}
		}

		>.page-wrapper {
			background-color: #fff;
			margin: 0 auto;

		}
	}

	body.boxed {
		&:not(.panel-popup) {

			.frame,
			.frame-fluid {
				width: 100%;
				padding: 0 !important;
			}
		}
	}
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
	.page-main {

		.account &,
		.cms-privacy-policy & {
			padding-top: 41px;
			position: relative;
		}
	}
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) {

	.navigation,
	.breadcrumbs,
	.page-header .header.panel,
	.header.content,
	.footer.content,
	.page-wrapper>.widget,
	.page-wrapper>.page-bottom,
	.block.category.event,
	.top-container,
	.page-main {
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
		width: auto;
	}

	.page-main {
		width: 100%;

		.lib-vendor-prefix-flex-grow(1);
		.lib-vendor-prefix-flex-shrink(0);
		.lib-vendor-prefix-flex-basis(auto);

		.ie9 & {
			width: auto;
		}
	}

	.columns {
		display: block;
	}

	.column.main {
		#lib-layout-columns>.main();
		&:extend(.abs-add-box-sizing-desktop all);
		min-height: 300px;
	}

	.sidebar-main {
		#lib-layout-columns>.left();
		padding-right: @layout-column-main__sidebar-offset;
		&:extend(.abs-add-box-sizing-desktop all);
	}

	.page-layout-2columns-right .sidebar-main {
		padding-left: @layout-column-main__sidebar-offset;
		padding-right: 0;
	}

	.sidebar-additional {
		#lib-layout-columns>.right();
		clear: right;
		padding-left: @layout-column__additional-sidebar-offset;
		&:extend(.abs-add-box-sizing-desktop all);
	}

	.page-layout-2columns-left {
		.sidebar-additional {
			clear: left;
			float: left;
			padding-left: 0;
			padding-right: @layout-column__additional-sidebar-offset;
		}
	}

	.panel.header {
		padding: 10px 30px;
	}
}