.view-document {
	> .document-heading {
		.doc-title {
			margin: 50px 0 10px;
			font-size: 2.2rem;
			font-weight: bold;
		}

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

.document-lifecycle-live {
	@include border-radius(3px);
	@include ease-in();
	display: inline-block;
	border: 2px solid $color-green;
	padding: 2px 10px;
	color: $color-gray;
	background-color: $color-off-white;
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;

	&:hover {
		color: $color-green;
	}
}

.document-lifecycle-draft {
	@extend .document-lifecycle-live;
	border: 2px solid $color-orange;

	&:hover {
		color: $color-orange;
	}
}

.document-protection-unlocked {
	@include border-radius(3px);
	@include ease-in();
	display: inline-block;
	padding: 2px 10px;
	font-weight: 800;
	font-size: 1rem;
	color: $color-gray;
	background-color: $color-off-white;
	border: 2px solid $color-gray;
	cursor: pointer;

	&:hover {
		color: $color-dark;
	}
}

.document-protection-review {
	@extend .document-protection-unlocked;
	border: 2px solid $color-orange;

	&:hover {
		color: $color-orange;
	}
}

.document-protection-locked {
	@extend .document-protection-unlocked;
	border: 2px solid $color-red;

	&:hover {
		color: $color-red;
	}
}

.document-category {
	display: inline-block;
	padding: 2px 10px;
	font-weight: 600;
	font-size: 1rem;
	color: $color-gray;
	background-color: $color-off-white;
	border: 2px solid $color-gray;
	border-left: 13px solid $color-gray;
	margin-right: 20px;
}

.document-tag {
	display: inline-block;
	padding: 2px 0;
	font-size: 1.1rem;
	font-weight: 600;
	font-style: italic;
	color: $color-gray;
	margin-right: 20px;
}