@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-indexes-padding: 0 8px 0 16px;
  --xzx-indexes-sidebar-z-index: 2;
  --xzx-indexes-index-font-size: var(--xzx-text-mini);
  --xzx-indexes-index-line-height: var(--xzx-text-lh-sm);
  --xzx-indexes-index-active-color: var(--xzx-color-primary);
  --xzx-indexes-index-margin: 2px;
}

@include b(indexes) {
  @include e(sidebar) {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: var(--xzx-indexes-sidebar-z-index);
    display: flex;
    flex-direction: column;
    text-align: center;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
  }

  @include e(index) {
    padding: var(--xzx-indexes-padding);
    font-weight: var(--xzx-text-m);
    font-size: var(--xzx-indexes-index-font-size);
    line-height: var(--xzx-indexes-index-line-height);
    margin: var(--xzx-indexes-index-margin) 0;

    @include m(active) {
      font-weight: bolder;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--xzx-text-white-1);
      &::after {
        content: '';
        width: 20px;
        height: 20px;
        position: absolute;
        z-index: -1;
        border-radius: 100%;
        background-color: var(--xzx-indexes-index-active-color);
      }
    }
  }
}

:root,
:host {
  --xzx-index-anchor-z-index: 1;
  --xzx-index-anchor-padding: 0 16px;
  --xzx-index-anchor-text-color: var(--xzx-text-gray-1);
  --xzx-index-anchor-font-weight: var(--xzx-text-w-m);
  --xzx-index-anchor-font-size: var(--xzx-text-sm);
  --xzx-index-anchor-line-height: 30px;
  --xzx-index-anchor-background: var(--xzx-gray-1);
  --xzx-index-anchor-sticky-text-color: var(--xzx-color-primary);
  --xzx-index-anchor-sticky-background: var(--xzx-color-white);
}

@include b(index-anchor) {
  z-index: var(--xzx-index-anchor-z-index);
  box-sizing: border-box;
  padding: var(--xzx-index-anchor-padding);
  color: var(--xzx-index-anchor-text-color);
  font-weight: var(--xzx-index-anchor-font-weight);
  font-size: var(--xzx-index-anchor-font-size);
  line-height: var(--xzx-index-anchor-line-height);
  background-color: var(--xzx-index-anchor-background);

  @include m(sticky) {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    color: var(--xzx-index-anchor-sticky-text-color);
    background-color: var(--xzx-index-anchor-sticky-background);
  }
}