@require '~styles/variables'

.site-editor
	height: 100vh
	width: 100%
	overflow: hidden
	background-color: transparent

	&-nav
		position: absolute
		top: 0
		left: 0
		right: 0

	&-sidebar, &-content
		position: absolute
		top: $navbar-height
		bottom: 0

	&-sidebar
		left: 0
		width: 350px

	&-bottom
		position: absolute
		bottom: 0
		left: 0
		right: 0
		height: 40%
		overflow-y: auto
		z-index: 2

	&-content
		right: 0
		left: 0

		.site-editor-tab-theme &
			left: 350px

		.site-editor-tab-content &
			bottom: 40%

		iframe
			display: block
			width: 100%
			height: 100%
			border: 0
