.o-anchor {
  --anchor-line-width: 1px;
  --anchor-line-bg-color: var(--o-color-control4);
  --anchor-line-gap: var(--o-gap-2);

  --anchor-indicator-width: 2px;
  --anchor-indicator-height: 12px;
  --anchor-indicator-bg-color: var(--o-color-primary1);

  --anchor-circle-size: 8px;
  --anchor-circle-ring-width: 1.5px;
  --anchor-circle-gap: 8px;
}

.o-anchor-item {
  --anchor-item-min-width: 144px;

  --anchor-item-link-color: var(--o-color-info2);
  --anchor-item-link-color-active: var(--o-color-primary1);
  --anchor-item-link-color-hover: var(--o-color-primary2);
  --anchor-item-link-color-press: var(--o-color-primary3);
  --anchor-item-link-color-disabled: var(--o-color-info4);

  --anchor-item-max-row: 2;

  --anchor-item-link-text-size: var(--o-font_size-text1);
  --anchor-item-link-text-height: var(--o-line_height-text1);

  --anchor-item-sub-link-text-size: var(--o-font_size-tip1);
  --anchor-item-sub-link-text-height: var(--o-line_height-tip1);

  --anchor-item-link-padding-h: 8px;
  --anchor-item-link-padding-v: 8px;
  --anchor-item-sub-link-padding-v: 5px;
  --anchor-item-link-radius: var(--o-radius_control-s);

  --anchor-item-text-indent: 12px;
}

.o-anchor-small {
  .o-anchor-item {
    --anchor-item-link-text-size: var(--o-font_size-tip1);
    --anchor-item-link-text-height: var(--o-line_height-tip1);

    --anchor-item-sub-link-text-size: var(--o-font_size-tip2);
    --anchor-item-sub-link-text-height: var(--o-line_height-tip2);

    --anchor-item-link-padding-v: 5px;
    --anchor-item-sub-link-padding-v: 5px;
  }
}

.o-anchor-menu {
  .o-anchor-item {
    --anchor-item-link-text-size: var(--o-font_size-tip1);
    --anchor-item-link-text-height: var(--o-line_height-tip1);

    --anchor-item-sub-link-text-size: var(--o-font_size-tip1);
    --anchor-item-sub-link-text-height: var(--o-line_height-tip1);

    --anchor-item-link-padding-v: 5px;
    --anchor-item-sub-link-padding-v: 5px;

    --anchor-item-text-indent: 20px;

    --anchor-item-bg-color-hover: var(--o-color-control2-light);
    --anchor-item-bg-color-press: var(--o-color-control3-light);
  }
}

.o-anchor-link-popover-wrapper {
  --anchor-popover-max-width: 200px;
}

.o-anchor-h {
  --anchor-bg-color: var(--o-color-fill2);
  --anchor-z-index: initial;
  --anchor-offset-top: 0;
  --anchor-x-overflown-bg-color: var(--o-grey-1);
  --anchor-x-overflown-width: 16px;
  --anchor-content-max-width: unset;

  .o-anchor-item {
    --anchor-item-link-color: var(--o-color-info3);
    --anchor-item-gap: 32px;
    --anchor-item-max-row: 1;
    --anchor-item-link-padding-h: 0;
    --anchor-item-link-padding-v: 12px;
    --anchor-item-min-width: unset;
  }
}

[data-o-theme*='dark'] {
  .o-anchor-h {
    // 其实应该是--o-color-fill2的，但是不支持透明度，所以用原始值，同锚点背景色
    --anchor-x-overflown-bg-color: var(--o-grey-4);
  }
}