:root {
  --color-A: #00FF00;
  --color-B: #4DFF00;
  --color-C: #B3FF00;
  --color-D: #FFFF00;
  --color-E: #FFB300;
  --color-F: #FF4D00;
  --color-G: #FF0000;
}

/* Reset */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* Emissions */

.vehicle-emissions {
  --rows: 7;                      /* 7 arrows A..G */
  --gaps: calc(var(--rows) - 1);  /* 6 gaps */
  --gap: 2.933333px;              /* to obtain 28.8/57.6 at 248px */
  --part: calc((100vh - (var(--gap) * var(--gaps))) / (var(--rows) + 1));

  display: grid;
  grid-template-rows: repeat(var(--rows), auto);
  grid-auto-rows: var(--part);
  gap: var(--gap);
  height: 100%;
  width: 100%;
  font-family: "Arial", sans-serif;
}

/* For the component generated in a png image file */
.image-container__wrapper:has(.vehicle-emissions) {
  .vehicle-emissions {
    width: min(100%, 400px);
    height: auto;
    grid-auto-rows: auto;
    gap: 0.3rem;
  }

  .level {
    width: calc(var(--width) - 2rem);
    padding: 0.35rem 0.5rem;
    font-size: clamp(0.9rem, 2rem, 4rem);
  }

  .level[data-consumption]:not(:empty) {
    font-size: 4rem;
    padding: 0.7rem 0.4rem;

    & span {
      font-size: clamp(1rem, 2.8rem, 11vw);
    }
  }
}

.level {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.5rem 0 0.25rem;
  color: #FFF;
  font-weight: bold;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  gap: 0.65rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
  width: calc(var(--width) - 1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(var(--part) * 2 / 3);
}

.level[data-consumption]:not(:empty) {
  grid-row: span 2;
  font-size: calc(var(--part) * 4 / 3);
  padding: 0 0.8rem 0 0.25rem;
  width: 100%;

  & span {
    font-size: calc(var(--part) - 8px); /* 20px */ 
    line-height: 1;
    font-weight: 400;
  }
}

.a {
  --width: calc(48% + 0 * 10%);
  background-color: var(--color-A);
}

.b {
  --width: calc(48% + 1 * 10%);
  background-color: var(--color-B);
}

.c {
  --width: calc(48% + 2 * 10%);
  background-color: var(--color-C);
}

.d {
  --width: calc(48% + 3 * 10%);
  background-color: var(--color-D);
}

.e {
  --width: calc(48% + 4 * 10%);
  background-color: var(--color-E);
}

.f {
  --width: calc(48% + 5 * 10%);
  background-color: var(--color-F);
}

.g {
  --width: calc(48% + 6 * 10%);
  background-color: var(--color-G);
}