/* global */
.-dark-mode {
  background: $dark-bg;
  color: $dark-fg;
}

.-light-mode {
  background: $light-bg;
  color: $light-fg;
}

.-dark-mode * {
  scrollbar-color: $dark-accent;
  scrollbar-background: $dark-bg;
}

.-light-mode * {
  scrollbar-color: $light-accent;
  scrollbar-background: $light-bg;
}

Screen {
  align: center middle;
  height: auto;
  scrollbar-size: 1 1;
  layers: content search windows;
}

LoadingIndicator {
  layer: windows;
}


/* contents */

Table {
  /* NOTE: height & width important so table will overflow Metadata */
  /* instead of its ScrollView parent widget */
  height: auto;
  width: auto;
}

SegmentWidget {
  height: auto;
}

.-dark-mode Image {
  border: solid $dark-fg;
}

.-light-mode Image {
  border: solid $light-fg;
}

.-dark-mode Image:hover {
  border: double $dark-accent;
  color: $dark-accent;
}

.-light-mode Image:hover {
  border: double $light-accent;
  color: $light-accent;
}

Section {
  /* NOTE: this works but causing wrong index in initial toc */
  /* ie. when saved in the top of chapter 7, it's restored as chapter 6 in TOC */
  /* height: 0; */

  /* NOTE: this works but look a little bit weird */
  opacity: 0%;

  /* NOTE: this doesn't work */
  /* visibility: hidden; */
  /* display: none; */
}

SearchMatch {
  layer: search;
  height: 1;
  width: auto;
}

.-dark-mode SearchMatch {
  background: $dark-accent;
}

.-light-mode SearchMatch {
  background: $light-accent;
}

Content * {
  text-align: $text-justification;
}

Content {
  layout: vertical;
  height: auto;
  layer: content;
  max-width: $text-max-width;
  margin: 0 2;
}

/* windows */

SearchInputPrompt {
  layer: windows;
  dock: bottom;
  border-title-align: center;
}

.-dark-mode SearchInputPrompt {
  background: $dark-bg;
  color: $dark-fg;
  border: solid $dark-accent;
}

.-light-mode SearchInputPrompt {
  background: $light-bg;
  color: $light-fg;
  border: solid $light-accent;
}

Window {
  dock: top;
  layer: windows;
  padding: 1 4;
  scrollbar-size: 1 1;
  overflow-y: auto;
  border-title-align: center;
  /* NOTE: set this in Window.on_mount() */
  /* so it will be responsive to screen size */
  /* margin: 3 10; */
}

.-dark-mode Window {
  border: double $dark-accent;
}

.-light-mode Window {
  border: double $light-accent;
}

DictDisplay {
  align: center top;
}

/* ToC { */
/*   border: double $dark-accent; */
/* } */

Alert {
  layer: windows;
  border: solid red;
  color: red;
  scrollbar-color: red;
}

NavPoint {
  height: auto;
  border: tall grey;
  margin: 0 1 1 0;
  padding: 0 5;
}

.-dark-mode NavPoint:focus {
  background: $dark-accent;
}

.-light-mode NavPoint:focus {
  background: $light-accent;
}
