.api-energy-class-badge {
	--api-energy-class-color: #667085;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 48px;
	margin-right: 22px;
	padding: 0 0.75rem;
	border-radius: 8px 0 0 8px;
	background: var(--api-energy-class-color);
	color: #fff;
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
	box-sizing: border-box;
}

.api-energy-class-badge::after {
	position: absolute;
	top: 0;
	left: 100%;
	width: 0;
	height: 0;
	border-top: 24px solid transparent;
	border-bottom: 24px solid transparent;
	border-left: 22px solid var(--api-energy-class-color);
	content: "";
}

.api-energy-class-badge--a4 {
	--api-energy-class-color: #3f77a8;
}

.api-energy-class-badge--a3 {
	--api-energy-class-color: #2c9f99;
}

.api-energy-class-badge--a2 {
	--api-energy-class-color: #269f83;
}

.api-energy-class-badge--a1 {
	--api-energy-class-color: #79c943;
}

.api-energy-class-badge--b {
	--api-energy-class-color: #b8df8c;
	color: #1d2733;
}

.api-energy-class-badge--c {
	--api-energy-class-color: #fff200;
	color: #1d2733;
}

.api-energy-class-badge--d {
	--api-energy-class-color: #ffcc00;
	color: #1d2733;
}

.api-energy-class-badge--e {
	--api-energy-class-color: #f28c00;
}

.api-energy-class-badge--f {
	--api-energy-class-color: #f26155;
}

.api-energy-class-badge--g {
	--api-energy-class-color: #f04400;
}

.api-energy-class-badge--unknown {
	--api-energy-class-color: #667085;
}