.pisell-anchor-containers {
  // display: flex;
  // align-items: center;
  // background-color: #fff;
  // height: 40px;
  .pisell-lowcode-anchor-wrapper {
    &::before {
      content: '';
      display: none;
    }
    .pisell-lowcode-anchor {
      height: 40px;
      border-bottom: none !important;
      background-color: #fff;

      .pisell-lowcode-anchor-ink {
        display: none;
      }

      .pisell-lowcode-anchor-link {
        height: 100%;
        padding: 0 16px;
        display: flex;
        align-items: center;

        &-title {
          color: var(--Gray-900, #101828);
          font-size: 16px;
          font-weight: 600;
          line-height: 40px;
        }
      }

      .pisell-lowcode-anchor-link-active {
        border-radius: 100px;
        background: var(--theme-color, #7f56d9);
        height: 40px;

        .pisell-lowcode-anchor-link-title {
          color: var(--White, #fff);
          line-height: 40px;
        }
      }
    }
  }
  .pisell-anchor-scroll {
    height: 40px;
    flex: 1;
    overflow-x: auto;

    // 隐藏滚动条 - Firefox
    scrollbar-width: none;

    // 隐藏滚动条 - IE and Edge
    -ms-overflow-style: none;

    // 隐藏滚动条 - Chrome, Safari, Opera
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .pisell-anchor-buttons {
    display: flex;
    gap: 8px;
    margin-left: 16px;

    .scroll-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      background: white;
      cursor: pointer;
      transition: all 0.3s;

      &:hover:not(.disabled) {
        color: #1890ff;
        border-color: #1890ff;
      }

      &.disabled {
        color: #d9d9d9;
        cursor: not-allowed;
        background: #f5f5f5;
      }
    }
  }
}

.pisell-anchor-tabs {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 17px;
  font-weight: 400;
  color: #0d1619;
  cursor: default;
  position: relative;

  .pisell-anchor-tabs-btn-left,
  .pisell-anchor-tabs-btn-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    cursor: pointer;
    transition: width 300ms ease;
    user-select: none;

    .pisell-anchor-tabs-btn-icon {
      width: 24px;
      height: 24px;
      background: #f1f1f1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #262626;
      font-size: 20px;
    }
  }

  .pisell-anchor-tabs-btn-left {
    left: 0;
  }

  .pisell-anchor-tabs-btn-right {
    right: 0;
  }

  .pisell-anchor-tabs-content {
    flex: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0;
    gap: 16px;

    &::-webkit-scrollbar {
      display: none;
    }

    .pisell-anchor-tabs-tab {
      flex: 0 0 auto;
      padding: 0 16px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.3s;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      border-radius: 100px;

      &:hover:not(.pisell-anchor-tabs-tab-active) {
        color: inherit;
      }

      &.pisell-anchor-tabs-tab-active {
        color: #fff;
        font-weight: 600;
        background-color: var(--theme-color, #7f56d9);
      }

      .pisell-anchor-tabs-tab-content {
        line-height: 24px;
      }
    }
  }
}

.pisell-anchor {
  border-bottom: 1px solid #eaecf0;

  &.pisell-anchor-no-border {
    border-bottom: none;
  }
}