.ty-anchor {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  list-style: none;
  position: relative;
  background-color: var(--ty-anchor-bg);
}
.ty-anchor__ink {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.ty-anchor__ink::before {
  content: "";
  position: relative;
  display: block;
  width: 2px;
  height: 100%;
  margin: 0 auto;
  background-color: var(--ty-anchor-ink-bg);
}
.ty-anchor__ink-ball {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--ty-anchor-ball-bg);
  border: 2px solid var(--ty-anchor-ball-border);
  border-radius: 8px;
  transform: translateX(-50%);
  transition: top 0.3s ease-in-out;
}
.ty-anchor__link {
  padding: var(--ty-anchor-link-padding);
}
.ty-anchor__link .ty-anchor {
  border: 0;
}
.ty-anchor__link_active > a {
  color: var(--ty-anchor-link-color-active);
}
.ty-anchor__link-title {
  display: block;
  overflow: hidden;
  color: var(--ty-anchor-link-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
}
.ty-anchor__link-title:hover {
  color: var(--ty-anchor-link-color-active);
  text-decoration: none;
}
.ty-anchor__link-title:not(:only-child) {
  margin-bottom: var(--ty-anchor-link-title-margin-bottom);
}
.ty-anchor_line .ty-anchor__ink-ball {
  width: 2px;
  border: 0;
  border-radius: 0;
  background-color: var(--ty-anchor-link-color-active);
  transition: top 0.3s ease-in-out, height 0.3s ease-in-out;
}