.eac-metrics {
	display: grid;
	justify-content: space-between;
	margin-bottom: 20px;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 12px;

	.eac-metric {
		background: #fff;
		border: 1px solid #e0e0e0;
		cursor: pointer;
		padding: 24px;
		position: relative;
		text-align: center;

		&__title {
			color: #6c757d;
			font-size: 14px;
			font-weight: normal;
			margin: 0 0 10px;
			text-transform: uppercase;
		}

		&__value {
			font-size: 24px;
			line-height: 1.2;
			font-weight: 600;
			color: #494f54;
			margin: 0;
			padding: 0;
		}

		&__delta {
			color: #059669;
			background-color: rgba(5, 150, 105, .05);
			display: inline-flex;
			align-items: center;
			justify-content: flex-end;
			border-radius: 0.125em;
			padding-left: 0.25em;
			padding-right: 0.25em;
			padding-top: 0.125em;
			padding-bottom: 0.125em;
			font-size: 11px;
			line-height: 1em;

			&.is--negative {
				color: #dc2626;
				background-color: rgba(220, 38, 38, .05);
			}
		}

		&__legend {
			background-color: #fff;
			border-bottom-left-radius: 8px;
			border-color: #fff #fff #e5e5e5 #e5e5e5;
			border-style: solid;
			border-width: 1px;
			color: #6c757d;
			font-size: 10px;
			line-height: 1em;
			padding: 2px 2px 4px 5px;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 11;
		}
	}
}