@value indicatorIconColor from './colors.module.css';

.root {
  composes: chapter from './outline.module.css';
  margin-bottom: 10px;
  padding: 0 10px 10px 10px;
  background-color: var(--ui-surface-color);
  border: solid 1px var(--ui-on-surface-color-lighter);
  border-radius: rounded(lg);
}

.selectableHover {
  background-color: var(--ui-selection-color-lighter);
}

.link {
  display: block;
  margin: 0 -10px 0 -10px;
  padding: 10px;
}

.outlineLink {
  composes: chapterLink from './outline.module.css';
  composes: link;
  position: relative;
}

.link::before {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 19px;
  color: indicatorIconColor;
}

.dragHandle {
  composes: dragHandle from './outline.module.css';
  color: var(--ui-on-surface-color);
}

.number {
  font-weight: bold;
}

.root:first-child:last-child .title.blank {
  display: none;
}

.hiddenInNavigation {
  opacity: 0.7;
}

.hiddenInNavigation::before {
  content: "(";
}

.hiddenInNavigation::after {
  content: ")";
}

.sections {
  composes: sections from './outline.module.css';
  margin: 10px 0 10px 0;
  min-height: 20px;
}

.creating .creatingIndicator     { display: block; }
.destroying .destroyingIndicator { display: block; }
.failed .failedIndicator         { display: block; }


.creatingIndicator   { composes: creatingIndicator from './outline.module.css'; }
.destroyingIndicator { composes: destroyingIndicator from './outline.module.css';  }
.failedIndicator     { composes: failedIndicator from './outline.module.css'; }

.addSection {
  composes: addButton from './buttons.module.css';
  composes: button from './outline.module.css';
}
