/**
* @file
* Styles for progressive content.
*/
.progressive-wrap {
  position: relative;
  display: flex;
  padding: 40px 0;
  --primary-light: #dbdbdb;
  --menu-width: 250px;
  --space-bw: 70px;
  --sticky-offset: 130px;
  /* header (111px) + breathing room */
}

body:has(.gin-secondary-toolbar--frontend) .progressive-wrap {
  --sticky-offset: 160px;
}

.progressive-wrap .progressive-menu {
  width: var(--menu-width);
  flex-shrink: 0;
  position: sticky;
  top: var(--sticky-offset);
  align-self: flex-start;
  max-height: calc(100vh - var(--sticky-offset) - 40px);
  overflow-y: auto;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--primary-light) transparent;
}

/* Chrome/Safari/Edge scrollbar */
.progressive-wrap .progressive-menu::-webkit-scrollbar {
  width: 6px;
}

.progressive-wrap .progressive-menu::-webkit-scrollbar-track {
  background: transparent;
}

.progressive-wrap .progressive-menu::-webkit-scrollbar-thumb {
  background-color: var(--primary-light);
  border-radius: 3px;
}

.progressive-wrap .progressive-contents {
  flex: 1;
  padding-left: var(--space-bw);
  width: calc(100% - var(--menu-width));
}

.progressive-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.progressive-menu li {
  position: relative;
  border-bottom: 1px solid var(--primary-light);
  --progress: 0%;
}

.progressive-menu li a {
  display: block;
  position: relative;
  z-index: 0;
  padding: 10px 0px;
  font-size: 1rem;
  line-height: 1.333;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.progressive-menu li a:hover {
  color: #1cabe2;
}

/* Progress fill, driven by the --progress custom property */
.progressive-menu li::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 4px;
  width: var(--progress);
  background-color: #F26A21;
  z-index: -1;
  transition: width .1s linear;
}

.progressive-contents {
  position: relative;
}

.progressive-content {
  scroll-margin-top: 20px;
}

.progressive-contents>*:not(:last-child) {
  padding-bottom: 60px;
}

.progressive-contents .progressive-content>*:last-child:not(.chapter-reference) {
  margin-bottom: 0;
  padding-bottom: 0;
}