/* /css/custom-scrollbar.css */

:root {
  --scrollbar-track-width: 8px;
  --scrollbar-thumb-width: 6px;
  --scrollbar-color: #5452fe;
  --scrollbar-color-secondary: #7977fe;
  --scrollbar-track-color: rgba(255, 255, 255, 0.03);
  --scrollbar-border-radius: 4px;
}

/* Estilo para navegadores baseados em WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: var(--scrollbar-track-width);
  height: var(--scrollbar-track-width);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
  border-radius: var(--scrollbar-border-radius);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--scrollbar-color) 0%,
    var(--scrollbar-color-secondary) 100%
  );
  border-radius: var(--scrollbar-border-radius);
  width: var(--scrollbar-thumb-width);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 10px rgba(84, 82, 254, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--scrollbar-color-secondary) 0%,
    var(--scrollbar-color) 100%
  );
}

/* Estilo para Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
}

/* Ocultar a barra de scroll em dispositivos móveis/tablets */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 3px;
  }

  * {
    scrollbar-width: thin;
  }
}

/* Adicionar uma classe para preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  ::-webkit-scrollbar-thumb,
  * {
    transition: none !important;
  }
}