.fancy-scrollbar {
  scroll-padding: 50% 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 12px;
}

.fancy-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.fancy-scrollbar::-webkit-scrollbar-track {
  background: rgba(24, 24, 24, 0%);
  margin: 0 calc((100vw - Min(1100px, 90vw)) / 2);
  border-radius: 20px;
}

.fancy-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(24, 24, 24, 20%);
  border-radius: 20px;
  border: 4px solid var(--ifm-background-color);
}

.light-pills-scrollbar {
  &::-webkit-scrollbar {
    height: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 24px;
  }
  &::-webkit-scrollbar-thumb {
    height: 8px;
    background-color: rgba(255, 255, 255, 50%);
    border-radius: 20px;
  }
}

.dark-pills-scrollbar {
  &::-webkit-scrollbar {
    height: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 24px;
  }
  &::-webkit-scrollbar-thumb {
    height: 8px;
    background-color: #18181880;
    border-radius: 20px;
  }
}

.docs-home-languages-scrollbar {
  &::-webkit-scrollbar {
    height: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 24px;
  }
  &::-webkit-scrollbar-thumb {
    height: 8px;
    background-color: rgba(#3b00b9, 50%);
    border-radius: 20px;
  }
}
