@import "/lib/fonts";

@g-color-bg-front: var(--color-base-0);
@g-color-bg-back: var(--color-base-200);

.page {
  background-color: @g-color-bg-back;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: row;
}

@stripe: 4px;

.binder {
  width: 100% * (2/12);
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-flow: column nowrap;
}

.binder_title {
  .font-ui-heading();
  padding: 12px 16px 0 16px;
  text-align: center;
}

.editor {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  background-color: @g-color-bg-front;
}

.satellite {
  width: 100% * (4/12);
  height: 100%;
  overflow: visible;
  background-color: @g-color-bg-front;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-flow: column nowrap;
}

.satellite_main {
  flex-grow: 1;
  display: flex;
  flex-flow: row nowrap;
}

.satellite_content {
  flex-grow: 1;
}

.satellite_menu {
  flex-grow: 0;
  width: 4rem;
  padding-bottom: 8px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-end;
  border-left: 2px solid @g-color-bg-back;
  box-sizing: content-box;
}
