.sa-surface {
  background: #00000050;
}

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

.sa-shine {
  position: relative;
  overflow: hidden;
}

.sa-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
}

.sa-shine:hover::before {
  animation: sa-shine 0.75s;
}

@keyframes sa-shine {
  100% {
    left: 125%;
  }
}

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable='true'],
.sa-selectable,
.sa-selectable * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

@media print {
  html,
  body {
    background: #fff !important;
  }

  body > * {
    display: none !important;
  }

  body::after {
    content: 'Printing is disabled on this site.';
    display: block;
    padding: 2rem;
    color: #000;
    font-family: sans-serif;
    font-size: 14pt;
    text-align: center;
  }
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cl-accent, 224, 173, 0), 0.6) rgba(255, 255, 255, 0.04);
  scrollbar-gutter: stable;
}

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

::-webkit-scrollbar-button {
  display: block;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px 7px;
}

::-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");
}

::-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");
}

::-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");
}

::-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");
}

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

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

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

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

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

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

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

.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) {
  .sa-shine:hover::before {
    animation: none;
  }
}