// :root {
//   --base-font-size: 16px;
// }
//
// body {
//   background-color: #422a40;
//   background-color: #2F1E2D;
//   color: #ffffff;
//   font-family: "Test Untitled Sans";
//   font-size: var(--base-font-size);
// }

el-workspace,
.el-workspace {
  --left-zone-width: 290px;
  --right-zone-width: 290px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  box-sizing: border-box;
  grid-template-columns: minmax(0, var(--left-zone-width)) auto minmax(0, var(--right-zone-width));
  grid-template-rows: 24px auto 24px;
}

el-workspace-area,
.el-workspace-area {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  order: 1;
}

// TODO: Flex basis 100% needed on child elements or remove flex containers entirely

el-workspace-area nav,
.el-workspace-area nav {
  flex-grow: 2;
}

el-workspace-area[zone=top],
.el-workspace-area.zone-top {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

el-workspace-area[zone=bottom],
.el-workspace-area.zone-bottom {
  grid-row: 3 / 4;
  grid-column: 1 / 4;
}

el-workspace-area[zone=left],
.el-workspace-area.zone-left {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

el-workspace-area[zone=center],
.el-workspace-area.zone-center {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

el-workspace-area[zone=right],
.el-workspace-area.zone-right {
  grid-column: 3 / 4;
  flex-direction: row-reverse;
  grid-row: 2 / 3;
}

el-workspace-area[zone=center][maximize-left],
.el-workspace-area.zone-center.maximize-left {
  grid-column: 1 / 3;
}

el-workspace-area[zone=center][maximize-right],
.el-workspace-area.zone-center.maximize-right {
  grid-column-end: 4;
}

el-workspace-area[zone=left][maximize-top],
el-workspace-area[zone=center][maximize-top],
el-workspace-area[zone=right][maximize-top],
.el-workspace-area.zone-left.maximize-top,
.el-workspace-area.zone-center.maximize-top,
.el-workspace-area.zone-right.maximize-top {
  grid-row: 1 / 3;
}

el-workspace-area[zone=left][maximize-bottom],
el-workspace-area[zone=center][maximize-bottom],
el-workspace-area[zone=right][maximize-bottom],
.el-workspace-area.zone-left.maximize-bottom,
.el-workspace-area.zone-center.maximize-bottom,
.el-workspace-area.zone-right.maximize-bottom {
  grid-row-end: 4;
}

el-workspace-resize-handle,
.el-workspace-resize-handle {
  width: 4px;
  height: 100%;
  border-right: 1px solid #180F17;
  align-self: flex-end;
  order: 2;
}

el-workspace-resize-handle.el-active,
.el-workspace-resize-handle.el-active {
  background-color: #a947a6;
}

el-workspace-area[zone=right] el-workspace-resize-handle,
.el-workspace-area.zone-right .el-workspace-resize-handle {
  border-left: 1px solid #180F17;
  border-right-color: transparent;
}

el-workspace-resize-handle:hover,
.el-workspace-resize-handle:hover {
  cursor: col-resize;
}