@use "~admin-stylesheets/breakpoints";
@use "~admin-stylesheets/mixins";
@use "~admin-stylesheets/variables";
@use "../../../../assets/src/admin/stylesheets/colors";

#wpcontent {
	padding-left: 0 !important;
}

.nab-edit-experiment-layout {

	.nab-edit-experiment-header {

		@include breakpoints.break-small {
			position: fixed;
			right: 0;
			top: variables.$admin-bar-height-big;
		}

		@include breakpoints.break-medium {
			top: variables.$admin-bar-height;
		}
	}

	&__body {

		@include breakpoints.break-small {
			margin-top: variables.$editor-bar-height;
		}

		@include breakpoints.break-medium {
			margin-right: variables.$editor-sidebar-width;
		}
	}

	&__content {
		box-sizing: border-box;
		padding: 1em;

		&,
		> * {
			background: colors.$color__background-editor;
		}

		@include breakpoints.break-medium {
			min-height: calc(
				100vh - #{variables.$admin-bar-height +
					variables.$editor-bar-height + 20}
			);
		}

		> div {
			max-width: 70em;
			margin: 0 auto;
		}

		> div:not(:first-child) {
			padding-top: 2em;
		}
	}

	.editor-post-title {
		padding: 0;

		&__block {
			max-width: none;
			padding: 0;
		}

		&__input {
			font-family: variables.$font-family;
			font-size: 2em;
			font-weight: 700;
		}
	}

	@include breakpoints.break-medium {

		.nab-edit-experiment-sidebar {
			border-left: 1px solid colors.$color__border-editor;
			height: 100vh;
			overflow: hidden;
			padding-top: variables.$editor-bar-height;
			position: fixed;
			right: 0;
			top: 0;
			width: variables.$editor-sidebar-width;
		}
	}

	&__content > &__notices {
		margin-left: -1em;
		margin-top: -1em;
		max-width: none;
		width: calc(100% + 2em);

		.components-notice {
			box-sizing: border-box;
			margin: 0 0 5px;
			padding: 6px 12px;
			min-height: 60px;

			&__dismiss {
				margin: 6px -5px 6px 5px;
			}
		}
	}
}

@include mixins.editor-left(
	".nab-edit-experiment-layout .nab-edit-experiment-header"
);