@keyframes px-rainbow {
  0% { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}
@keyframes px-rgb {
  0% { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}
@keyframes px-candy {
  0% { background-position: 0 0; }
  100% { background-position: 24px 0; }
}

:root,
[data-px-style],
[data-style] {
  --px-width: 12px;
  --px-radius: 10px;
  --px-thumb: #2f80ed;
  --px-track: #e8eef7;
  --px-hover: #1b62c9;
  --px-thumb2: #56ccf2;
}

[data-px-style="minimal"], [data-style="minimal"] {
  --px-track: transparent;
}
[data-px-style="rounded"], [data-style="rounded"] {
  --px-radius: 999px;
}
[data-px-style="neon"], [data-style="neon"] {
  --px-track: rgba(0, 0, 0, 0.22);
}
[data-px-style="dark"], [data-style="dark"] {
  --px-track: #1e1e24;
}
[data-px-style="neumorphism"], [data-style="neumorphism"] {
  --px-thumb: #e8eef7;
  --px-track: #e8eef7;
  --px-hover: #2f80ed;
}
[data-px-style="slim"], [data-style="slim"] {
  --px-width: 5px;
  --px-radius: 999px;
  --px-track: transparent;
}
[data-px-style="flat"], [data-style="flat"] {
  --px-radius: 0px;
}
[data-px-style="candy"], [data-style="candy"] {
  --px-hover: var(--px-thumb);
}
[data-px-style="rainbow"], [data-style="rainbow"] {
  --px-thumb: #ff595e;
  --px-track: rgba(0, 0, 0, 0.08);
  --px-thumb2: #6a4c93;
}
[data-px-style="rgb"], [data-style="rgb"] {
  --px-thumb: #00f0ff;
  --px-track: #0f0f14;
  --px-thumb2: #ff00e5;
}

::-webkit-scrollbar-corner,
[data-px-style]::-webkit-scrollbar-corner,
[data-style]::-webkit-scrollbar-corner {
  background: transparent;
}

[data-px-style="minimal"]::-webkit-scrollbar,
[data-style="minimal"]::-webkit-scrollbar {
  width: var(--px-width);
  height: var(--px-width);
}
[data-px-style="minimal"]::-webkit-scrollbar-track,
[data-style="minimal"]::-webkit-scrollbar-track {
  background: transparent;
}
[data-px-style="minimal"]::-webkit-scrollbar-thumb,
[data-style="minimal"]::-webkit-scrollbar-thumb {
  background: var(--px-thumb);
  border-radius: var(--px-radius);
}
[data-px-style="minimal"]::-webkit-scrollbar-thumb:hover,
[data-style="minimal"]::-webkit-scrollbar-thumb:hover {
  background: var(--px-hover);
}

[data-px-style="rounded"]::-webkit-scrollbar,
[data-style="rounded"]::-webkit-scrollbar {
  width: calc(var(--px-width) + 4px);
  height: calc(var(--px-width) + 4px);
}
[data-px-style="rounded"]::-webkit-scrollbar-track,
[data-style="rounded"]::-webkit-scrollbar-track {
  background: var(--px-track);
  border-radius: 999px;
}
[data-px-style="rounded"]::-webkit-scrollbar-thumb,
[data-style="rounded"]::-webkit-scrollbar-thumb {
  background: var(--px-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-px-style="rounded"]::-webkit-scrollbar-thumb:hover,
[data-style="rounded"]::-webkit-scrollbar-thumb:hover {
  background: var(--px-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-px-style="gradient"]::-webkit-scrollbar,
[data-style="gradient"]::-webkit-scrollbar {
  width: var(--px-width);
  height: var(--px-width);
}
[data-px-style="gradient"]::-webkit-scrollbar-track,
[data-style="gradient"]::-webkit-scrollbar-track {
  background: var(--px-track);
  border-radius: var(--px-radius);
}
[data-px-style="gradient"]::-webkit-scrollbar-thumb,
[data-style="gradient"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--px-thumb), var(--px-thumb2));
  border-radius: var(--px-radius);
}
[data-px-style="gradient"]::-webkit-scrollbar-thumb:hover,
[data-style="gradient"]::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--px-thumb2), var(--px-thumb));
}

[data-px-style="neon"]::-webkit-scrollbar,
[data-style="neon"]::-webkit-scrollbar {
  width: var(--px-width);
  height: var(--px-width);
}
[data-px-style="neon"]::-webkit-scrollbar-track,
[data-style="neon"]::-webkit-scrollbar-track {
  background: var(--px-track);
  border-radius: var(--px-radius);
}
[data-px-style="neon"]::-webkit-scrollbar-thumb,
[data-style="neon"]::-webkit-scrollbar-thumb {
  background: var(--px-thumb);
  border-radius: var(--px-radius);
  box-shadow: 0 0 6px var(--px-thumb), 0 0 12px var(--px-thumb);
}
[data-px-style="neon"]::-webkit-scrollbar-thumb:hover,
[data-style="neon"]::-webkit-scrollbar-thumb:hover {
  background: var(--px-hover);
  box-shadow: 0 0 10px var(--px-hover), 0 0 20px var(--px-hover);
}

[data-px-style="glass"]::-webkit-scrollbar,
[data-style="glass"]::-webkit-scrollbar {
  width: var(--px-width);
  height: var(--px-width);
}
[data-px-style="glass"]::-webkit-scrollbar-track,
[data-style="glass"]::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--px-thumb) 10%, transparent);
  border-radius: var(--px-radius);
}
[data-px-style="glass"]::-webkit-scrollbar-thumb,
[data-style="glass"]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--px-thumb) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--px-thumb) 60%, transparent);
  border-radius: var(--px-radius);
}
[data-px-style="glass"]::-webkit-scrollbar-thumb:hover,
[data-style="glass"]::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--px-thumb) 65%, transparent);
}

[data-px-style="dark"]::-webkit-scrollbar,
[data-style="dark"]::-webkit-scrollbar {
  width: var(--px-width);
  height: var(--px-width);
}
[data-px-style="dark"]::-webkit-scrollbar-track,
[data-style="dark"]::-webkit-scrollbar-track {
  background: #1e1e24;
  border-radius: var(--px-radius);
}
[data-px-style="dark"]::-webkit-scrollbar-thumb,
[data-style="dark"]::-webkit-scrollbar-thumb {
  background: var(--px-thumb);
  border-radius: var(--px-radius);
  border: 2px solid #1e1e24;
  background-clip: padding-box;
}
[data-px-style="dark"]::-webkit-scrollbar-thumb:hover,
[data-style="dark"]::-webkit-scrollbar-thumb:hover {
  background: var(--px-hover);
  background-clip: padding-box;
}

[data-px-style="neumorphism"]::-webkit-scrollbar,
[data-style="neumorphism"]::-webkit-scrollbar {
  width: calc(var(--px-width) + 2px);
  height: calc(var(--px-width) + 2px);
}
[data-px-style="neumorphism"]::-webkit-scrollbar-track,
[data-style="neumorphism"]::-webkit-scrollbar-track {
  background: var(--px-track);
  border-radius: var(--px-radius);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.18), inset -1px -1px 2px rgba(255, 255, 255, 0.7);
}
[data-px-style="neumorphism"]::-webkit-scrollbar-thumb,
[data-style="neumorphism"]::-webkit-scrollbar-thumb {
  background: var(--px-track);
  border-radius: var(--px-radius);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.22), -1px -1px 2px rgba(255, 255, 255, 0.85);
}
[data-px-style="neumorphism"]::-webkit-scrollbar-thumb:hover,
[data-style="neumorphism"]::-webkit-scrollbar-thumb:hover {
  background: var(--px-thumb);
  background-clip: padding-box;
}

[data-px-style="slim"]::-webkit-scrollbar,
[data-style="slim"]::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
[data-px-style="slim"]::-webkit-scrollbar-track,
[data-style="slim"]::-webkit-scrollbar-track {
  background: transparent;
}
[data-px-style="slim"]::-webkit-scrollbar-thumb,
[data-style="slim"]::-webkit-scrollbar-thumb {
  background: var(--px-thumb);
  border-radius: 999px;
}
[data-px-style="slim"]::-webkit-scrollbar-thumb:hover,
[data-style="slim"]::-webkit-scrollbar-thumb:hover {
  background: var(--px-hover);
}

[data-px-style="flat"]::-webkit-scrollbar,
[data-style="flat"]::-webkit-scrollbar {
  width: var(--px-width);
  height: var(--px-width);
}
[data-px-style="flat"]::-webkit-scrollbar-track,
[data-style="flat"]::-webkit-scrollbar-track {
  background: var(--px-track);
}
[data-px-style="flat"]::-webkit-scrollbar-thumb,
[data-style="flat"]::-webkit-scrollbar-thumb {
  background: var(--px-thumb);
}
[data-px-style="flat"]::-webkit-scrollbar-thumb:hover,
[data-style="flat"]::-webkit-scrollbar-thumb:hover {
  background: var(--px-hover);
}

[data-px-style="candy"]::-webkit-scrollbar,
[data-style="candy"]::-webkit-scrollbar {
  width: var(--px-width);
  height: var(--px-width);
}
[data-px-style="candy"]::-webkit-scrollbar-track,
[data-style="candy"]::-webkit-scrollbar-track {
  background: var(--px-track);
  border-radius: var(--px-radius);
}
[data-px-style="candy"]::-webkit-scrollbar-thumb,
[data-style="candy"]::-webkit-scrollbar-thumb {
  background: repeating-linear-gradient(45deg, var(--px-thumb) 0, var(--px-thumb) 6px, var(--px-thumb2) 6px, var(--px-thumb2) 12px);
  border-radius: var(--px-radius);
  animation: px-candy 1.2s linear infinite;
}
[data-px-style="candy"]::-webkit-scrollbar-thumb:hover,
[data-style="candy"]::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.1);
}

[data-px-style="rainbow"]::-webkit-scrollbar,
[data-style="rainbow"]::-webkit-scrollbar {
  width: var(--px-width);
  height: var(--px-width);
}
[data-px-style="rainbow"]::-webkit-scrollbar-track,
[data-style="rainbow"]::-webkit-scrollbar-track {
  background: var(--px-track);
  border-radius: var(--px-radius);
}
[data-px-style="rainbow"]::-webkit-scrollbar-thumb,
[data-style="rainbow"]::-webkit-scrollbar-thumb {
  background: linear-gradient(0deg, #ff595e, #ffca3a, #8ac926, #1982c4, #6a4c93, #ff595e);
  background-size: 100% 300%;
  border-radius: var(--px-radius);
  animation: px-rainbow 5s linear infinite;
}
[data-px-style="rainbow"]::-webkit-scrollbar-thumb:hover,
[data-style="rainbow"]::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.12);
}

[data-px-style="rgb"]::-webkit-scrollbar,
[data-style="rgb"]::-webkit-scrollbar {
  width: var(--px-width);
  height: var(--px-width);
}
[data-px-style="rgb"]::-webkit-scrollbar-track,
[data-style="rgb"]::-webkit-scrollbar-track {
  background: #0f0f14;
  border-radius: var(--px-radius);
}
[data-px-style="rgb"]::-webkit-scrollbar-thumb,
[data-style="rgb"]::-webkit-scrollbar-thumb {
  background: linear-gradient(0deg, #00f0ff, #7b4dff, #ff00e5, #00f0ff);
  background-size: 100% 300%;
  border-radius: var(--px-radius);
  box-shadow: 0 0 8px rgba(123, 77, 255, 0.55);
  animation: px-rgb 3s linear infinite;
}
[data-px-style="rgb"]::-webkit-scrollbar-thumb:hover,
[data-style="rgb"]::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.15);
}

@supports not selector(::-webkit-scrollbar) {
  [data-px-style],
  [data-style] {
    scrollbar-width: auto;
    scrollbar-color: var(--px-thumb) var(--px-track);
  }
  [data-px-style="minimal"],
  [data-px-style="slim"],
  [data-px-style="glass"],
  [data-style="minimal"],
  [data-style="slim"],
  [data-style="glass"] {
    scrollbar-width: thin;
  }
  [data-px-style="dark"],
  [data-style="dark"] {
    scrollbar-color: var(--px-thumb) #1e1e24;
  }
  [data-px-style="rgb"],
  [data-style="rgb"] {
    scrollbar-color: #00f0ff #0f0f14;
  }
  [data-px-style="rainbow"],
  [data-style="rainbow"] {
    scrollbar-color: #8a5cf6 rgba(0, 0, 0, 0.08);
  }
  [data-px-style="candy"],
  [data-style="candy"] {
    scrollbar-color: var(--px-thumb2) var(--px-thumb);
  }
}