.vue-component code.id {
	color: maroon;
}
.vue-component abbr {
	text-decoration: underline dotted 1px;
}
.vue-component .unit {
	opacity: 0.6;
}

/* Job Status */
.vue-component .status[data-value="submitted"] {
	color: black;
}
.vue-component .status[data-value="running"] {
	color: darkorange;
}
.vue-component .status[data-value="queued"] {
	color: darkblue;
}
.vue-component .status[data-value="finished"] {
	color: darkgreen;
}
.vue-component .status[data-value="canceled"] {
	color: darkgrey;
}
.vue-component .status[data-value="error"] {
	color: red;
}

/* Inline headers */
.vue-component.inline.process {
	margin-left: 1em;
}
.vue-component.inline h1 {
	font-size: 1.17em;
}
.vue-component.inline h2 {
	font-size: 1.1em;
}
.vue-component.inline h3 {
	font-size: 1.05em;
}
.vue-component.inline h4,
.vue-component.inline h5,
.vue-component.inline h6 {
	font-size: 1em;
}

/* Comma separated list */
.vue-component .comma-separated-list {
	display: inline;
	list-style: none;
	padding: 0;
}
.vue-component .comma-separated-list li {
	display: inline;
	padding: 0;
}
.vue-component .comma-separated-list li:after {
	content: ", ";
}
.vue-component .comma-separated-list li:last-child:after {
	content: "";
}

/* The required star */
.vue-component .required {
	color: red;
	font-weight: bold;
}

/* Message blocks (Notices, errors, warnings, ...) */
.vue-component.message-block {
	margin: 1em 0;
	padding: 0.5em;

	> strong {
		display: block;
		margin-bottom: 0.5em;
	}

	> p {
		margin: 0;
	}
}

/* Styling process signatures (incl. examples) */
.vue-component .param-name, .vue-component .process-name {
	color: #369;
}
.vue-component .param-argument, .vue-component .return-value {
	color: #936;
}
.vue-component .data-type {
	color: #693;
}
.vue-component .param-optional {
	font-weight: bold;
}

/* Badges */
.vue-component .badges {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline-block;
}
.vue-component .badges .badge {
	display: inline-block;
	font-size: 0.8em;
	margin: 0.25em;
	padding: 0.35em 0.5em 0.25em 0.5em;
	line-height: 1em;
	text-align: center;
	white-space: nowrap;
	text-transform: uppercase;
	vertical-align: baseline;
	border-radius: 0.5em;
	color: #fff;
	background-color: #6c757d;
}
.vue-component .badges:not(.inline) {
	margin-left: -0.25em;
	margin-right: -0.25em;
}
.vue-component .badges.small .badge {
	padding: 0.25em 0.35em 0.2em 0.35em;
	font-size: 0.75em;
}
.vue-component .badges.inline {
	margin-left: 0.5em;
	border-radius: 0.25em;

	.badge {
		margin-top: 0;
		margin-bottom: 0;
	}
}
.vue-component .badges .badge a {
	color: #fff;
	border-bottom: 1px dotted #fff;
	text-decoration: none;
}
.vue-component .badges .badge a.badge-fill {
	margin: -0.35em -0.5em;
	padding: 0.35em 0.5em;
	display: block;
	border-bottom: 0px;
}
.vue-component .badges.small .badge a.badge-fill {
	margin: -0.2em -0.3em;
	padding: 0.25em 0.35em;
}
.vue-component .badges .badge a:hover {
	color: #fff;
	border-bottom-style: solid;
}
.vue-component .badges .default {
	background-color: #555;
}
.vue-component .badges .green {
	background-color: green;
}
.vue-component .badges .red {
	background-color: maroon;
}
.vue-component .badges .option1 {
	background-color: #369;
}
.vue-component .badges .option2 {
	background-color: #693;
}
.vue-component .badges .option3 {
	background-color: #936;
}
.vue-component .badges .option4 {
	background-color: #963;
}
.vue-component .badges .deprecated {
	background-color: red;
}
.vue-component .badges .experimental {
	background-color: blueviolet;
}

.vue-component .badges .text {
	text-transform: none;
	font-size: 1rem;
	font-weight: 500;
}

.vue-component .badges .action {
	border: 1px solid black;
	background-color: white;
	color: black;
	margin: 0.33em;
	cursor: pointer;
	text-transform: none;

	&:hover {
		background-color: black;
		color: white;

		> a {
			color: white;
		}
	}

	> a {
		color: black;
	}
}
/* Badges for UDFs */
.vue-component .badges .docker {
	background-color: #0db7ed;
}

/* Table like lists */
.vue-component .tabular {
	display: flex;
	margin: 0.2em 0;
	padding: 1px;
}
.vue-component .tabular label {
	flex: 1;
	font-weight: bold;
}
.vue-component .tabular .value {
	flex: 3;
}
.vue-component .tabular .value > ul,
.vue-component .tabular .value > .formatted > ul,
.vue-component .tabular ul.value,
.vue-component .tabular .value > ol,
.vue-component .tabular .value > .formatted > ol,
.vue-component .tabular ol.value,
.vue-component .tabular .value td > div {
	max-height: 15em;
	overflow: auto;
	margin: 0;
}
.vue-component .tabular .value pre,
.vue-component .tabular ol.value,
.vue-component .tabular ul.value {
	margin: 0;
}

/* STAC Collections and Items */
.vue-component.stac .map {
	background: transparent;
	height: 350px;
}
.vue-component.stac .tabular {
	margin: 0.5em 0;
}
.vue-component.stac .tabular.wrap {
	display: block;
}
.vue-component.stac .tabular.wrap .value {
	margin-top: 0.5em;
	margin-left: 1em;
	margin-bottom: 0.5em;
}
.vue-component.stac .tabular .value ul {
	padding-left: 20px;
}
.vue-component.stac .links:empty, .assets.empty {
	display: none;
}
.vue-component.stac .thumbnails {
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	white-space: nowrap;
}
.vue-component.stac .thumbnails a {
	margin: 5px;
	display: inline-block;
}

.vue-component.stac .thumbnails a img {
	padding: 2px;
	max-height: 200px;
	vertical-align: middle;
	border: 2px solid transparent;
}
.vue-component.stac .thumbnails a:hover img {
	border: 2px solid rgba(0,0,0,0.5);
}

.vue-component {
	.federation {
		> ul > li {
			margin-bottom: 0.5em;

			> small {
				display: block;
			}

			> h4 {
				margin: 0;
			}
		}


		.fed-header {
			margin: 0.2em 0;

			> .fed-title {
				display: inline-block;
				vertical-align: bottom;
			}
		}
	}
}