.sa-surface {
  background: #00000050;
}

.sa-surface-hover:hover {
  background-color: #000000b2;
}

html {
  scrollbar-gutter: stable;
}

@supports (-moz-appearance: none) or (-moz-osx-font-smoothing: auto) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--cl-accent, 224, 173, 0)) var(--cl-border, rgba(255, 255, 255, 0.06));
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-track {
  background-color: var(--cl-border, rgba(255, 255, 255, 0.06));
  background-clip: content-box;
  border: 1px solid transparent;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(var(--cl-accent, 224, 173, 0), 0.8);
  background-clip: content-box;
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 32px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--cl-accent, 224, 173, 0));
}

::-webkit-scrollbar-thumb:active {
  background-color: rgb(var(--cl-accent, 224, 173, 0));
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-thumb {
  background-color: rgba(var(--cl-accent, 224, 173, 0), 0.85);
  border: 2px solid transparent;
}

html:hover::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active {
  background-color: rgb(var(--cl-accent, 224, 173, 0));
}

html::-webkit-scrollbar-track {
  border: 2px solid transparent;
}

html::-webkit-scrollbar-button {
  display: block;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
}

html::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 6.25L5 3.75L7.5 6.25' fill='none' stroke='%23E0AD00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 3.75L5 6.25L7.5 3.75' fill='none' stroke='%23E0AD00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M6.25 2.5L3.75 5L6.25 7.5' fill='none' stroke='%23E0AD00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.75 2.5L6.25 5L3.75 7.5' fill='none' stroke='%23E0AD00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html::-webkit-scrollbar-button:vertical:start:increment,
html::-webkit-scrollbar-button:vertical:end:decrement,
html::-webkit-scrollbar-button:horizontal:start:increment,
html::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}

.post-toc-scroll::-webkit-scrollbar,
.pal-scroll::-webkit-scrollbar,
.editor .e-table::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.post-toc-scroll::-webkit-scrollbar-thumb,
.pal-scroll::-webkit-scrollbar-thumb,
.editor .e-table::-webkit-scrollbar-thumb {
  background-color: rgba(var(--cl-accent, 224, 173, 0), 0.8);
  background-clip: content-box;
  border: 1px solid transparent;
  border-radius: 999px;
}

.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar-button,
.hide-scrollbar::-webkit-scrollbar-track,
.hide-scrollbar::-webkit-scrollbar-thumb {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-sa-tilt] {
    transform: none !important;
    transition: none !important;
  }
}