.ui-anchor-link {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  line-height: 1.4em;
  padding-left: 1em;
  padding-top: .25em;
  padding-bottom: .25em;
  &:first-of-type {
    .ui-anchor-link-line {
      top: calc(50%);
    }
  }
  &:last-of-type {
    .ui-anchor-link-line {
      bottom: calc(50%);
    }
  }
  &:before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    left: -3px;
    top: calc(50% - 3px);
    z-index: 1;
  }
  &:hover {
    color: $color-primary;
    &:before {
      background-color: $color-gray;
    }
  }
  &.ui-active {
    font-weight: 600;
    color: $color-primary;
    &:before {
      background-color: $color-primary;
    }
  }
}

.ui-anchor-link-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: $color-light;
}