/**
 * Estilos de Scrollbar personalizados
 *
 * Usamos CSS nativo porque React Native / Expo no ofrece APIs para
 * personalizar el scrollbar en web. Esta es la única forma de lograr
 * un diseño coherente con el tema oscuro de la aplicación.
 */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(116, 116, 116) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgb(116, 116, 116);
  border-radius: 0 !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgb(150, 150, 150);
  border-radius: 0 !important;
}

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

/* React Native Web ScrollView con data-scrollview */
[data-scrollview] {
  scrollbar-width: thin !important;
  padding: 0;
  margin: 0;
  scrollbar-color: rgb(29, 17, 195) transparent !important;
  border-radius: 0px !important;
}

[data-scrollview]::-webkit-scrollbar {
  width: 6px !important;
  padding: 0;
  margin: 0;
  height: 6px !important;
  border-radius: 0 !important;
}

[data-scrollview]::-webkit-scrollbar-thumb {
  background: rgb(241, 79, 241) !important;
  border-radius: 0px !important;
  padding: 0;
  margin: 0;
}

[data-scrollview]::-webkit-scrollbar-thumb:hover {
  background: rgb(218, 241, 41) !important;
  padding: 0;
  margin: 0;
  border-radius: 0 !important;
}

[data-scrollview]::-webkit-scrollbar-track {
  background: transparent !important;
  padding: 0;
  margin: 0;
  border-radius: 0 !important;
}