.zone-document-content {
	> .back-to-space {
		margin: 10px 0;

		> a {
			> .regular-button {
				> .name {
					// max-width: 150px;
					// @extend .truncate;
				}
			}
		}
	}

	.doc-title {
		font-size: 2rem;
		margin: 30px 0 10px;
		font-weight: normal;
	}

	.doc-excerpt {
		font-size: 1rem;
		color: $color-gray;
		margin: 0 0 45px;
	}

	.edit-document-heading {
		margin: 30px 0 0 0;

		.edit-doc-title {
			> input {
				font-size: 2rem;
				font-weight: normal;
				margin: 0 0 10px;
				color: $color-wysiwyg;
			}
		}

		.edit-doc-excerpt {
			font-size: 1rem;
			margin: 0 0 10px;
			color: $color-gray;
		}
	}
}

.document-view {
	margin: 0 0 50px 0;

	.is-a-page {
		@include content-container();
		@include ease-in();
		@extend .transition-all;
		overflow-x: auto;

		&:hover {
			.page-title {
				> .page-toolbar {
					opacity: 1;
				}
			}
		}

		.page-title {
			> .page-toolbar {
				opacity: 0;
			}
		}
	}

	.is-a-tab {
		@include content-container();
		@include ease-in();

		.icon {
			text-align: center;
			display: inline-block;
			width: 40px;
			vertical-align: bottom;
			margin-right: 5px;

			> .img {
				text-align: center;
				display: inline-block;
				height: 30px;
				width: 30px;
			}
		}

		> .title {
			font-size: 1.3rem;
			font-weight: normal;
			color: $color-off-black;
			letter-spacing: 0.5px;
			margin-top: 8px;
		}

		&:hover {
			.page-title {
				> .page-toolbar {
					opacity: 1;
				}
			}
		}

		.page-title {
			> .page-toolbar {
				opacity: 0;
			}
		}
	}

	.tab-min {
		padding: 0px 50px;
		height: 65px;
		overflow: hidden;
		cursor: default;

		.page-title {
			> .page-toolbar {
				opacity: 1;
			}
		}
	}

	.tab-max {
		padding: 25px 50px;
		height: auto;
		overflow: auto;
		cursor: normal;
	}

	.section-divider {
		height: 60px;
		background-color: transparent;
	}

	.start-section {
		@extend .no-select;
		height: 60px;
		background-color: transparent;
		position: relative;
		cursor: pointer;

		> .start-button {
			display: none;
			text-align: center;
			padding-top: 20px;
			color: $color-green;
			font-size: 1rem;
			position: relative;

			> .round-button {
				opacity: 0.6 !important;
			}

			> .label {
				display: inline-block;
				margin-left: 10px;
			}

			> .line {
				display: inline-block;
				height: 1px;
				border: 1px solid $color-green;
				width: 100px;
				margin: 0 20px 0 20px;
				opacity: 0.2;
			}
		}

		&:first-of-type {
			height: 30px;

			> .start-button {
				padding-top: 0;
			}
		}
	}

	.start-section-empty-state {
		> .start-button {
			display: block;
		}
	}

	.new-section-wizard {
		@include border-radius(2px);
		margin: 0 0 30px 0;
		padding: 30px;
		border: 1px solid $color-stroke;
		background-color: $color-off-white;
		display: none;

		.section-name {
			font-weight: bold;
		    font-size: 1.5rem;
		    margin: 0 0 30px 0;
		    color: $color-black;
		}

		.template-caption {
			color: $color-gray;
			margin: 10px 0 10px 0;
			font-size: 1.2rem;
		}

		> .list-wrapper {
			height: 440px;
			overflow-y: auto;

			> .preset-list {
				margin: 0;
				padding: 0;

				> .item {
					@include ease-in();
					@include border-radius(4px);
					list-style: none;
					cursor: pointer;
					display: inline-block;
					border: 1px solid $color-stroke;
					background-color: $color-white;
					margin: 0 20px 20px 0;
					padding: 15px 0 0 20px;
					width: 200px;
					height: 60px;

					&:hover {
						@include ease-in();
						border-color: $color-link;
					}

					.icon {
						text-align: center;
						display: inline-block;
						width: 40px;
						margin-right: 10px;
						float: left;

						> .img {
							text-align: center;
							display: inline-block;
							height: 30px;
							width: 30px;
							float: left;
						}
					}

					> .title {
						font-size: 1rem;
						font-weight: normal;
						color: $color-off-black;
						letter-spacing: 0.5px;
						margin-top: 6px;
					}
				}
			}

			> .block-list {
				margin: 0;
				padding: 0;

				> .item {
					@include ease-in();
					@include border-radius(4px);
					list-style: none;
					cursor: pointer;
					display: inline-block;
					border: 1px solid $color-stroke;
					background-color: $color-white;
					margin: 0 20px 20px 0;
					padding: 12px 0 0 20px;
					width: 423px;
					height: 60px;
					position: relative;

					&:hover {
						@include ease-in();
						border-color: $color-link;

						> .block-actions {
							display: block;
						}
					}

					> .block-actions {
						@include ease-in();
						display: none;
						position: absolute;
						top: 10px;
						right: 8px;

						.material-icons {
							color: $color-stroke;
							font-size: 1rem;
						}
					}

					> .details {
						width: 350px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						> .title {
							font-size: 1rem;
							font-weight: normal;
							color: $color-off-black;
							letter-spacing: 0.5px;
							margin-top: 0;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						> .desc {
							color: $color-gray;
							font-size: 0.8rem;
							margin-top: 5px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
}

.document-view-unified {
	margin: 0 0 50px 0;
	@include content-container();
	@include ease-in();
	@extend .transition-all;

	.is-a-page, .is-a-tab {
		padding: 0 !important;
		box-shadow: none !important;
		background-color: transparent !important;
		@include border-radius(0px);
	}

	.tab-min, .tab-max {
		padding: 0 !important;
	}

	.start-section {
		height: 50px !important;
	}
}

.dropdown-page-toolbar {
	width: 300px;
}