@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(anchor) {
  display: inline-flex;
  gap: 12px;

  @include e(ink) {
    width: 2px;
    background-color: getCssVar("color", "fill-2");
    position: relative;
    margin-left: 8px;

    &::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      height: 100%;
      width: 0;
      border-left: 2px solid getCssVar("color", "fill-3");
      transform: translateX(-50%);
    }
  }

  @include e(ink-ball) {
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: getCssVar("radius", "circle");
    background-color: getCssVar("color", "primary-6");
    transform: translate(-50%, -50%);
    transition: top 0.2s getCssVar("bezier", "1");
    box-shadow: 0 0 0 3px getCssVar("color", "primary-1");
  }

  @include e(list) {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  @include m(line-less) {
    padding-left: 0;

    @include be(anchor, ink) {
      display: none;
    }
  }

  @include e(link) {
    display: flex;
    flex-direction: column;

    @include when(active) {
      @include be(anchor, link-title) {
        color: getCssVar("color", "primary-6");
      }
    }
  }

  @include e(link-title) {
    height: 24px;
    display: flex;
    align-items: center;
    font-size: 13px;
    padding: 0 8px;
    color: getCssVar("color", "text-2");
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &:hover {
      background-color: getCssVar("color", "fill-2");
      color: getCssVar("color", "primary-5");
    }
  }

  @include e(link-children) {
    padding-left: 12px;
  }
}