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

.chapter {
  padding: 0 10px 10px 10px;
}

.chapterLink {
  composes: rightOpen from './icons.module.css';
}

.collapsed .chapter {
  padding-bottom: 0;
  cursor: move;
}

.collapsed .chapterLink {
  padding-left: 30px;
  pointer-events: none;
}

.collapsed .chapterLink::before {
  display: none;
}

.chapter:first-child .sectionWithTransition:first-child .transition {
  display: none;
}

.collapsed .sections,
.collapsed .button {
  display: none;
}

.indicator {
  display: none;
  position: absolute;
  right: 14px;
  top: 7px;
  width: 30px;
  height: 30px;
  font-size: 19px;
  color: indicatorIconColor;
}

.creatingIndicator {
  composes: indicator;
  composes: arrowsCcw from './icons.module.css';
  composes: blink from './animations.module.css';
}

.destroyingIndicator {
  composes: indicator;
  composes: trash from './icons.module.css';
  composes: blink from './animations.module.css';
}

.failedIndicator {
  composes: indicator;
  composes: attention from './icons.module.css';
  color: errorIconColor;
}

.dragHandle {
  composes: drag from './icons.module.css';
  opacity: 0.3;
  cursor: move;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30px;
  transition: opacity 0.1s ease;
  transition-delay: var(--outline-drag-handle-transition-delay);
}

.storyline:not(.collapsed) .chapterLink .dragHandle {
  display: none;
}
