body {
  --anchor-width: 150px;
  --anchor-line-width: 2px;
  --anchor-line-slider-height: 12px;
  --anchor-font-size-title: 13px;
  --anchor-line-height-base: 1.5;
  --anchor-title-padding-vertical: 4px;
  --anchor-color: var(--brand-color);
  --anchor-line-margin-right: 12px;
  --anchor-title-padding-horizontal: 8px;
  --anchor-color-bg-line: var(--bg-color-component);
  --anchor-title-margin-bottom: 2px;
  --anchor-color-title: var(--text-color-secondary);
  --anchor-item-inner-margin-left: 16px;
  --anchor-lineless-color-title_active: var(--color-primary-6);
}
.mx-anchor {
  position: relative;
  width: var(--anchor-width);
  overflow: auto;
}
.mx-anchor-line-slider {
  position: absolute;
  height: var(--anchor-line-slider-height);
  width: var(--anchor-line-width);
  margin-top: calc((var(--anchor-font-size-title) * var(--anchor-line-height-base)) / 2 + var(--anchor-title-padding-vertical) - (var(--anchor-line-slider-height) / 2));
  background-color: var(--anchor-color);
  left: 0;
  top: 0;
  transition: top 0.2 var(--transition-timing-function-standard);
  z-index: 1;
}
.mx-anchor-list {
  margin-left: calc(var(--anchor-line-margin-right) - var(--anchor-title-padding-horizontal) + var(--anchor-line-width));
  position: relative;
}
.mx-anchor-list::before {
  content: '';
  position: absolute;
  height: 100%;
  background-color: var(--anchor-color-bg-line);
  width: var(--anchor-line-width);
  left: calc(var(--anchor-title-padding-horizontal) - var(--anchor-line-margin-right) - var(--anchor-line-width));
}
.mx-anchor-link {
  margin-bottom: var(--anchor-title-margin-bottom);
}
.mx-anchor-link-title {
  color: var(--anchor-color-title);
  line-height: var(--anchor-line-height-base);
  font-size: var(--anchor-font-size-title);
  margin-bottom: var(--anchor-title-margin-bottom);
  padding: var(--anchor-title-padding-vertical) var(--anchor-title-padding-horizontal);
  text-decoration: none;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  border-radius: var(--anchor-border-radius-title-hover);
}
.mx-anchor-link-title:hover {
  color: var(--anchor-color);
}
.mx-anchor-link-active > .mx-anchor-link-title {
  transition: all 0.1s var(--transition-timing-function-linear);
  color: var(--anchor-color);
  font-weight: 500;
}
.mx-anchor-link .mx-anchor-link {
  margin-left: var(--anchor-item-inner-margin-left);
}
.mx-anchor-lineless .mx-anchor-list {
  margin-left: 0;
}
.mx-anchor-lineless .mx-anchor-list::before {
  display: none;
}
.mx-anchor-lineless .mx-anchor-link-active > .mx-anchor-link-title {
  background-color: var(--anchor-lineless-bg-title_active);
  font-weight: 500;
}
