.toc {
  padding-bottom: 80px;

  .bar {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid var(--dx-bg-color--separator);

    .progress {
      font-weight: 700;
    }

    .closeButton {
      color: var(--dx-fg-color--dimmed);
      cursor: pointer;
      margin-right: 4px;

      &:hover {
        color: var(--dx-fg-accent-color);
      }
    }
  }

  .tocList {
    padding: 8px;
    margin: 0;

    li {
      line-height: 1.75rem;

      .currentMarker {
        margin-left: -14px;
        margin-right: 6px;
        color: var(--dx-fg-accent-color);
      }

      .readMarker {
        color: var(--dx-fg-succes-color);
      }
    }

    li.displayTitle {
      list-style-type: none;
      font-weight: bold;
      font-size: 1.5rem;
      margin: 0 0 0.5rem 0;
    }

    li.displaySection {
      list-style-type: none;
      font-weight: bold;
      font-size: 0.9rem;
      margin: 0 0 0 8px;
    }

    li.displayLink {
      list-style-type: none;
      font-size: 0.8rem;
      margin: 0 0 0 16px;
    }

    .text {
      margin-right: 4px;
    }

    .readStats {
      font-size: 0.9rem;
      margin: 0 0 8px 0;

      .readPercent {
        color: var(--dx-fg-succes-color);
      }

      .readCount {
        font-size: 0.7rem;
        color: var(--dx-fg-color--dimmed);
      }
    }
  }
}
