/// <reference no-default-lib="true" />
/// <reference lib="esnext" />
/// <reference lib="dom" />

export const makeLeftStatusBar = (): HTMLDivElement => {
  const style = document.createElement("style");
  style.textContent = `.status-bar.left {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 80vw;
  overflow-x: auto;
  overflow-y: hidden;
}
.status-bar.left:empty {
  display: none;
}
.status-bar.left > div {
  border-left: unset;
}
.status-bar.left > div {
  border-right: 1px solid var(--tool-light-color, #a9aaaf);
}
.status-bar.left > div:first-of-type {
  border-top-left-radius: unset;
}
.status-bar.left > div:last-of-type {
  border-top-right-radius: 3px;
}`;
  document.head.append(style);

  const statusBar = document.createElement("div");
  statusBar.classList.add("status-bar", "left");

  const footer = document.getElementsByClassName("footer")[0]!;
  footer.append(statusBar);

  return statusBar;
};