codevise/pageflow

@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);
}

.root:global(.ui-sortable-helper) {
  box-shadow: var(--ui-box-shadow-xl);
}

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

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

.outlineLink {
  composes: rightOpen from './icons.module.css';
  composes: link;
  position: relative;
  padding-left: 30px;
}

.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-light);
}

.link:hover .dragHandle {
  opacity: 1;
}

.number {
  font-weight: bold;
}

.title {}

.sections {
  margin: 10px 0 10px 0;
  min-height: 20px;
}

.withTransitions .sections {
  margin-top: 20px;
}

.root:first-child .sections {
  margin-top: 10px;
}

.sections > :global(.sortable-placeholder) {
  margin-top: 25px;
  margin-bottom: 22px;
}

.root:first-child .sections > li:first-child + :global(.sortable-placeholder) {
  margin-top: 16px;
}

.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';
}