@import "../lib.less";
@import "../variables/components/anchor.less";

// TODO remove it
@veui-anchor-height-m: veui-line-height(
  @veui-line-height-m,
  @veui-link-font-size-m
);
@veui-anchor-height-s: veui-line-height(
  @veui-line-height-m,
  @veui-link-font-size-s
);

.@{veui-prefix}-anchor {
  position: relative;
  max-height: 100%;
  overflow: auto;

  &-placeholder {
    display: block;
    width: 0;
    height: 0;
  }

  &-tree {
    display: inline-block;
    padding: 0 0 0 @veui-anchor-track-width;
    &::before {
      content: "";
      display: block;
      border-left: @veui-anchor-track-width solid @veui-anchor-track-color;
      width: @veui-anchor-track-width;
      .absolute(0, _, 0, 0);
    }
    ul {
      padding-left: @veui-anchor-level-indent;
    }
  }

  &-wrapper {
    max-height: 100vh;
    .@{veui-prefix}-tree-item {
      height: @veui-anchor-height-m;
      line-height: @veui-anchor-height-m;
      margin-top: @veui-anchor-padding-x;
      &:hover::before {
        display: none;
      }
      .@{veui-prefix}-anchor-item {
        height: inherit;
      }
    }

    &[ui~="s"] {
      .@{veui-prefix}-tree-item {
        height: @veui-anchor-height-s;
        line-height: @veui-anchor-height-s;
      }
    }

    &
      > .@{veui-prefix}-tree
      > li:first-child
      > .@{veui-prefix}-tree-item:first-child {
      margin-top: 0;
    }
  }

  &-wrapper &-item:first-child {
    margin-left: @veui-anchor-level-indent;
  }

  &-current::before {
    content: "";
    position: absolute;
    left: 0;
    width: @veui-anchor-indicator-width;
    height: inherit;
  }

  &-wrapper &-current {
    &::before {
      background-color: @veui-anchor-indicator-color;
    }

    &:hover::before {
      background-color: @veui-anchor-indicator-color-hover;
    }

    &.focus-visible::before {
      background-color: @veui-anchor-indicator-color-focus;
    }

    &:active::before {
      background-color: @veui-anchor-indicator-color-active;
    }
  }

  &-item {
    &:hover {
      color: @veui-anchor-indicator-color-hover;
    }
    &:active {
      color: @veui-anchor-indicator-color-active;
    }
  }
}