:host {
  display: inline-block;
}

.hb-anchor {
  position: relative;
  padding-left: var(--hb-spacing-md);
}

.hb-anchor__ink {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--hb-color-border, var(--hb-color-fill-secondary));
  border-radius: var(--hb-border-radius-xs);
}

.hb-anchor__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-anchor__item {
  margin-bottom: var(--hb-spacing-xs);
}

.hb-anchor__item:last-child {
  margin-bottom: 0;
}

.hb-anchor__link {
  display: inline-block;
  padding: var(--hb-spacing-xxs) var(--hb-spacing-xs);
  font-size: var(--hb-font-size-sm);
  line-height: 1.5;
  color: var(--hb-color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--hb-border-radius-xs);
  transition: color var(--hb-transition-duration) var(--hb-transition-function);
}

.hb-anchor__link:hover {
  color: var(--hb-color-primary);
}

.hb-anchor__link--active {
  color: var(--hb-color-primary);
  font-weight: 500;
}
