#key-panel.panel {
  display: flex;
  justify-content: flex-end;
  padding: 6px 12px;
  font-size: var(--small-text-size);
  position: relative;
}

/* Adds the key color bars. */

#key-panel .key {
  display: flex;
  align-items: center;
}
#key-panel .key::before {
  content: ' ';
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: currentColor; /* use the text color as the background */
  margin-right: 6px;
  /* Vertical size and position — hopefully the ems work well even if we change font size */
  margin-bottom: 0.1em;
  flex-shrink: 0
}

/* Have some minimum distance between labels if there's not much space… */
#key-panel .key:not(:last-child),
#key-panel .key-title {
  margin-right: 16px;
}

#key-panel .key-title {
  flex-grow: 1;
  color: var(--grey-highlight);
}

#key-panel .key-title em {
  font-style: italic;
  white-space: nowrap;
}

#key-panel .key-app {
  color: var(--area-color-app);
}
#key-panel .key-deps {
  color: var(--area-color-deps);
}
#key-panel .key-core {
  color: var(--area-color-core);
}