@import "vars";
@import "lore-editor";

#app, body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: var(--color-background);
  color: var(--color-foreground);
}

* {
  box-sizing: border-box;
}

#app > * {
  height: 100%;
}

.dock {
  display: grid;
  grid-template-columns: max(300px, 10%) auto max(250px, 10%);
  grid-template-rows: 40px auto 20px;
  grid-template-areas: "menu menu menu" "tree main properties" "status status status";
}

.dock > * > * {
  width: 100%;
  height: 100%;
}

.dock--main, .dock--tree, .dock--properties {
  overflow: auto;
}

.dock--status, .dock--menu {
  overflow: hidden;
}

.dock--menu {
  grid-area: menu;
}

.dock--tree {
  grid-area: tree;
}

.dock--main {
  grid-area: main;
}

.dock--properties {
  grid-area: properties;
}

.dock--status {
  grid-area: status;
}