@import "../../variables.less";

td, th {
	vertical-align: middle;
}

p {
	margin: 5px 0;
}

@result-grid-gap: 3px;
@result-grid-gap-large: 12px;

.sum-container, .result-container {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-column-gap: @result-grid-gap;

	// Icon color
	> i.fas {
		color: #222;
		align-self: center;
	}

	> .points, > .delta {
		justify-self: end;
	}
}

.sum-container {
	grid-template-columns: @line-height-computed max-content;
}

.result-container {
	grid-template-columns: @line-height-computed max-content max-content calc(@line-height-computed + @result-grid-gap-large) 28px 28px max-content;

	> .offset-left {
		margin-left: @result-grid-gap-large;
	}

	> .delta {
		align-self: end;
	}

	> .sla-col {
		grid-column: 4 / span 4;
		vertical-align: middle;
		white-space: nowrap;

		.status.label {
			padding: 0.3em 0.6em;
			border-radius: 0.35em;
			display: inline-block;
			vertical-align: middle;
			user-select: none;
		}

		.info-link {
			margin: -0.5px 0px -5px 5px;
			float: right;
		}

		.history-3, .history-2, .history-1 {
			display: inline-block;
			border-radius: 50%;
			margin-right: 4px;
			padding: 0;
			vertical-align: middle;

			&.history-3 {
				width: 8px;
				height: 8px;
				opacity: 0.7;
			}

			&.history-2 {
				width: 10px;
				height: 10px;
				opacity: 0.8;
			}

			&.history-1 {
				width: 12px;
				height: 12px;
				opacity: 0.9;
				margin-right: 6px;
			}
		}
	}
}
