.service-info {
	margin: -10px 0;
	border-left: 4px solid $green;

	.service-info-grid {
		display: grid;
		grid-template-columns: max-content auto;
		row-gap: 10px;
		column-gap: 10px;
		padding: 10px 10px 0;

		&:last-of-type {
			padding-bottom: 10px;
		}
	}

	.service-info-label {

		&::after {
			content: ':';
		}
	}

	.service-info-value {
		.service-info-value-sla {
			display: inline-block;
			word-break: break-word;
			line-height: 18px;

			&:not(:last-child) {
				margin-right: 10px;
			}

			.btn-icon {
				@extend %button-size-medium;

				margin-left: 5px;
			}
		}
	}

	.service-name {
		padding-bottom: 5px;
		font-size: $font-h2-size;
	}

	.service-actions {
		justify-self: end;
	}

	.service-status {
		display: inline-block;
		padding: 0 4px;
		border-radius: 3px;
		background-color: $green;
		color: $white;
	}

	@each $severity-type, $color in (
		na-bg: $alt-blue-grey,
		info-bg: $alt-dark-blue,
		average-bg: $alt-orange,
		warning-bg: $alt-yellow,
		high-bg: $alt-dark-orange,
		disaster-bg: $alt-red,
	) {
		// Dynamically generated classes:
		//  .service-status-na-bg
		//  .service-status-normal-bg
		//  .service-status-info-bg
		//  .service-status-average-bg
		//  .service-status-warning-bg
		//  .service-status-high-bg
		//  .service-status-disaster-bg
		&.service-status-#{$severity-type} {
			border-color: var(--severity-color-#{$severity-type});

			.service-status {
				background-color: var(--severity-color-#{$severity-type});
				color: darken($color, 45%);
			}
		}
	}
}
