body {
  margin: 0;
}

.ex-app {
  display: flex;
  width: 100vw;
  min-height: 100vh;
  justify-content: space-between;
  align-items: stretch;

  --ex-nav-width: 60px;
  --ex-nav-expanded-width: 320px;

  --interact: #3f9cff;
  --interact-lite: #3f9cff;

  --grey-0: white;
  --grey-1-t: rgba(0, 0, 0, 0.05);
  --grey-1: rgb(242, 242, 242);
  --grey-2-t: rgba(0, 0, 0, 0.1);
  --grey-2: rgb(230, 230, 230);
  --grey-3-t: rgba(0, 0, 0, 0.2);
  --grey-3: rgb(205, 205, 205);
  --grey-4-t: rgba(0, 0, 0, 0.4);
  --grey-4: rgb(155, 155, 155);
  --grey-5-t: rgba(0, 0, 0, 0.7);
  --grey-5: rgb(75, 75, 75);
  --black: rgba(0, 0, 0, 0.9);

  --bg: var(--grey-1);
  --fg: var(--black);

  --interact: #3f9cff;
  --interact-lite: #3f9cff;

  --z-toolbar: 2000;
  --z-context-menu: 3000;
  --z-tree-block-select: 4000;
  --z-modal: 10000;

  * {
    box-sizing: border-box;
  }

  &--edit-nav {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
  }

  &--page {
    flex-basis: 100%;

    &:not(:first-child) {
      margin-left: var(--ex-nav-width);
    }
  }

  @media screen and (min-width: 1000px) {
    --ex-nav-width: var(--ex-nav-expanded-width);

    &--edit-nav {
      position: unset;
      width: unset;
      flex-basis: var(--ex-nav-width);
      flex-grow: 0;
      flex-shrink: 0;
    }
  }
}