Sidebar.module.css

.root {
  left: 0;
  z-index: 700;
  overflow: hidden;
  height: 100%;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 145px;
  left: 0;
  height: calc(100vh - 145px);
  background: var(--lightgray);
  width: var(--margin);
  transition: top 0.2s ease-in-out, width 0.4s ease;
}

.root.headerScrolled {
  top: 60px;
  height: calc(100vh - 60px);
}

.root.show {
  flex-basis: var(--col2);
  padding-left: var(--margin);
  padding-right: var(--gutter);
  width: var(--col2);
}

.title {
  font-size: var(--text-reduced);
  padding-top: 20px;
  overflow-wrap: break-word; 
}

.toggleButton {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-large);
  color: var(--darkgray);
  & .toggleLabel {
    display: none;
  }
}

.listWrapper {
  flex-grow: 1;
  position: relative;
  overflow-y: auto;
  padding-top: 1rem; 
  & ul li h4 {
    text-wrap: pretty;
  }
}

.active a h4 {
  color: var(--processing-blue-mid);
}

@media (--reduced) {
  .root {
    top: 95px;
    height: 48px;
    width: auto;
    padding-left: calc(var(--margin) + var(--gutter));
    padding-right: var(--gutter);
  }
  .toggleButton {
    position: relative;
    top: 12px;
    right: auto;
    & .toggleLabel {
      position: relative;
      top: -2px;
      padding-right: 3px;
      font-size: var(--text-small);
      text-transform: uppercase;
      display: inline;
    }
  }
  .root.headerScrolled {
    top: 50px;
    height: 48px;
  }
  .root.show {
    width: 100%;
    height: calc(100vh - 100px);
    padding-left: calc(var(--margin) + var(--gutter));
    padding-right: calc(var(--margin) + var(--gutter));
    padding-bottom: var(--vertical-margin-large);
  }

  .root.show.headerScrolled {
    top: 50px;
    height: calc(100vh - 50px);
  }

  .root.show .sidebarWrapper {
    max-width: auto;
  }
  .root.show .toggleButton {
    position: absolute;
    right: var(--gutter);
    & .toggleLabel {
      display: none;
    }
  }
}

.tocItem {
  margin-bottom: 1rem;

  & a {
    font-family: var(--font);
    text-overflow: ellipsis;
    color: var(--processing-blue-dark);
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
    padding: 3px 0.75rem;
    transition: color 0.3s, border-left-color 0.3s;

    &:hover {
      color: var(--processing-blue-mid);
      border-left-color: var(--processing-blue-mid);
    }

  }

  & h4 {
    font-size: var(--text-regular);
    color: inherit;
    margin: 0;
  }
}