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

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

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

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

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

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

[data-pt-style="gradient"]::-webkit-scrollbar,
[data-style="gradient"]::-webkit-scrollbar {
  width: var(--pt-width);
  height: var(--pt-width);
}
[data-pt-style="gradient"]::-webkit-scrollbar-track,
[data-style="gradient"]::-webkit-scrollbar-track {
  background: var(--pt-track);
  border-radius: var(--pt-radius);
}
[data-pt-style="gradient"]::-webkit-scrollbar-thumb,
[data-style="gradient"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pt-thumb) 0%, var(--pt-thumb2) 100%);
  border-radius: var(--pt-radius);
}
[data-pt-style="gradient"]::-webkit-scrollbar-thumb:hover,
[data-style="gradient"]::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.15);
}

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

[data-pt-style="glass"]::-webkit-scrollbar,
[data-style="glass"]::-webkit-scrollbar {
  width: var(--pt-width);
  height: var(--pt-width);
}
[data-pt-style="glass"]::-webkit-scrollbar-track,
[data-style="glass"]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--pt-radius);
}
[data-pt-style="glass"]::-webkit-scrollbar-thumb,
[data-style="glass"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--pt-radius);
}
[data-pt-style="glass"]::-webkit-scrollbar-thumb:hover,
[data-style="glass"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

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

[data-pt-style="neumorphism"]::-webkit-scrollbar,
[data-style="neumorphism"]::-webkit-scrollbar {
  width: var(--pt-width);
  height: var(--pt-width);
}
[data-pt-style="neumorphism"]::-webkit-scrollbar-track,
[data-style="neumorphism"]::-webkit-scrollbar-track {
  background: var(--pt-track);
  border-radius: var(--pt-radius);
  box-shadow: inset 2px 2px 5px rgba(166, 180, 200, 0.7), inset -2px -2px 5px rgba(255, 255, 255, 0.9);
}
[data-pt-style="neumorphism"]::-webkit-scrollbar-thumb,
[data-style="neumorphism"]::-webkit-scrollbar-thumb {
  background: var(--pt-thumb);
  border-radius: var(--pt-radius);
  box-shadow: 2px 2px 5px rgba(166, 180, 200, 0.7), -2px -2px 5px rgba(255, 255, 255, 0.9);
}
[data-pt-style="neumorphism"]::-webkit-scrollbar-thumb:hover,
[data-style="neumorphism"]::-webkit-scrollbar-thumb:hover {
  background: var(--pt-hover);
}

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

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

[data-pt-style="candy"]::-webkit-scrollbar,
[data-style="candy"]::-webkit-scrollbar {
  width: var(--pt-width);
  height: var(--pt-width);
}
[data-pt-style="candy"]::-webkit-scrollbar-track,
[data-style="candy"]::-webkit-scrollbar-track {
  background: var(--pt-track);
  border-radius: var(--pt-radius);
}
[data-pt-style="candy"]::-webkit-scrollbar-thumb,
[data-style="candy"]::-webkit-scrollbar-thumb {
  border-radius: var(--pt-radius);
  background-color: var(--pt-thumb);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.45) 8px,
    rgba(255, 255, 255, 0.45) 16px
  );
  animation: pt-candy 1s linear infinite;
}

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

[data-pt-style="rgb"]::-webkit-scrollbar,
[data-style="rgb"]::-webkit-scrollbar {
  width: var(--pt-width);
  height: var(--pt-width);
}
[data-pt-style="rgb"]::-webkit-scrollbar-track,
[data-style="rgb"]::-webkit-scrollbar-track {
  background: var(--pt-track);
  border-radius: var(--pt-radius);
}
[data-pt-style="rgb"]::-webkit-scrollbar-thumb,
[data-style="rgb"]::-webkit-scrollbar-thumb {
  border-radius: var(--pt-radius);
  background: linear-gradient(
    180deg,
    #00f0ff 0%,
    #7000ff 33%,
    #ff007b 66%,
    #00f0ff 100%
  );
  background-size: 100% 300%;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6), 0 0 18px rgba(255, 0, 123, 0.6);
  animation: pt-rgb 3s linear infinite;
}