.px-scroll-theme.os-scrollbar-vertical .os-scrollbar-handle::after {
  width: calc(100% + var(--px-bit) * 2);
  height: calc(100% + var(--px-bit) * 2);
  z-index: 0;
  content: '';
  display: block;
  position: absolute;
  left: calc(-1 * var(--px-bit));
  top: calc(-1 * var(--px-bit));
  pointer-events: none;
  background: linear-gradient(to right, transparent 0, transparent calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(100% - calc(var(--px-bit) - 0px)), transparent calc(100% - calc(var(--px-bit) - 0px)), transparent 100%) top left / 100% var(--px-bit) no-repeat, linear-gradient(to right, transparent 0, transparent calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(100% - calc(var(--px-bit) - 0px)), transparent calc(100% - calc(var(--px-bit) - 0px)), transparent 100%) bottom left / 100% var(--px-bit) no-repeat, linear-gradient(to bottom, transparent 0, transparent calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(100% - calc(var(--px-bit) - 0px)), transparent calc(100% - calc(var(--px-bit) - 0px)), transparent 100%) top left / var(--px-bit) 100% no-repeat, linear-gradient(to bottom, transparent 0, transparent calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(100% - calc(var(--px-bit) - 0px)), transparent calc(100% - calc(var(--px-bit) - 0px)), transparent 100%) top right / var(--px-bit) 100% no-repeat, linear-gradient(to bottom, transparent 0, transparent calc(50% - 5px), var(--px-neutral-8) calc(50% - 5px), var(--px-neutral-8) calc(50% - 3px), transparent calc(50% - 3px), transparent calc(50% - 1px), var(--px-neutral-8) calc(50% - 1px), var(--px-neutral-8) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(50% + 3px), var(--px-neutral-8) calc(50% + 3px), var(--px-neutral-8) calc(50% + 5px), transparent calc(50% + 5px)) center / calc(50% - 2px) 100% no-repeat;
}
.px-scroll-theme.os-scrollbar-horizontal .os-scrollbar-handle::after {
  width: calc(100% + var(--px-bit) * 2);
  height: calc(100% + var(--px-bit) * 2);
  z-index: 0;
  content: '';
  display: block;
  position: absolute;
  left: calc(-1 * var(--px-bit));
  top: calc(-1 * var(--px-bit));
  pointer-events: none;
  background: linear-gradient(to right, transparent 0, transparent calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(100% - calc(var(--px-bit) - 0px)), transparent calc(100% - calc(var(--px-bit) - 0px)), transparent 100%) top left / 100% var(--px-bit) no-repeat, linear-gradient(to right, transparent 0, transparent calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(100% - calc(var(--px-bit) - 0px)), transparent calc(100% - calc(var(--px-bit) - 0px)), transparent 100%) bottom left / 100% var(--px-bit) no-repeat, linear-gradient(to bottom, transparent 0, transparent calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(100% - calc(var(--px-bit) - 0px)), transparent calc(100% - calc(var(--px-bit) - 0px)), transparent 100%) top left / var(--px-bit) 100% no-repeat, linear-gradient(to bottom, transparent 0, transparent calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(var(--px-bit) - 0px), var(--px-neutral-10) calc(100% - calc(var(--px-bit) - 0px)), transparent calc(100% - calc(var(--px-bit) - 0px)), transparent 100%) top right / var(--px-bit) 100% no-repeat, linear-gradient(to right, transparent 0, transparent calc(50% - 5px), var(--px-neutral-8) calc(50% - 5px), var(--px-neutral-8) calc(50% - 3px), transparent calc(50% - 3px), transparent calc(50% - 1px), var(--px-neutral-8) calc(50% - 1px), var(--px-neutral-8) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(50% + 3px), var(--px-neutral-8) calc(50% + 3px), var(--px-neutral-8) calc(50% + 5px), transparent calc(50% + 5px)) center / 100% calc(50% - 2px) no-repeat;
}
.px-scroll-theme .os-scrollbar-handle {
  position: relative;
  border-radius: 0;
  box-sizing: border-box;
  border-width: var(--px-bit);
  border-style: solid;
  border-color: transparent;
  background-color: var(--px-neutral-1);
  background-clip: padding-box;
  transition: background 0.25s;
}
.px-scroll-theme .os-scrollbar-handle:hover {
  background-color: var(--px-neutral-4);
}
.px-scroll-theme .os-scrollbar-handle:active {
  background-color: var(--px-neutral-7);
}
.px-scroll-theme.os-scrollbar-vertical {
  width: calc(2 * var(--px-bit) + 8px);
  box-sizing: border-box;
  max-height: calc(100% - 2 * var(--px-bit) - 8px);
}
.px-scroll-theme.os-scrollbar-horizontal {
  height: calc(2 * var(--px-bit) + 8px);
  box-sizing: border-box;
  max-width: calc(100% - 2 * var(--px-bit) - 8px);
}
.px-scroll-theme.os-scrollbar-cornerless {
  max-width: none;
  max-height: none;
}
.px-scroll {
  box-sizing: border-box;
}
.px-scroll__y {
  padding-right: calc(2 * var(--px-bit) + 8px);
}
.px-scroll__x {
  padding-bottom: calc(2 * var(--px-bit) + 8px);
}
.px-scroll-simple-theme .os-scrollbar-handle {
  border-radius: 0;
  box-sizing: border-box;
  border-width: 0;
  background-color: var(--px-neutral-7);
  transition: background 0.25s;
}
.px-scroll-simple-theme .os-scrollbar-handle:hover {
  background-color: var(--px-neutral-8);
}
.px-scroll-simple-theme .os-scrollbar-handle:active {
  background-color: var(--px-neutral-8);
}
.px-scroll-simple-theme.os-scrollbar-vertical {
  width: 4px;
  box-sizing: border-box;
  max-height: calc(100% - 4px);
}
.px-scroll-simple-theme.os-scrollbar-horizontal {
  height: 4px;
  box-sizing: border-box;
  max-height: calc(100% - 4px);
}
.px-scroll-simple-theme.os-scrollbar-cornerless {
  max-width: none;
  max-height: none;
}
.px-scroll__simple.px-scroll {
  box-sizing: border-box;
}
.px-scroll__simple.px-scroll__y {
  padding-right: 4px;
}
.px-scroll__simple.px-scroll__x {
  padding-bottom: 4px;
}