@import "tailwindcss";
@plugin "daisyui"{
  themes: false;
}

:root{
  --bg-dark-color: #0A2435;
  --text-dark-color: #fff;
  --accent-color: #2ECC71;
  --btn-dark-bg: #2A3D4A;
  --link-color: #23A9F0;
}

/* Hidden by default */
.scrollbar-left {
  direction: ltr;
  scrollbar-width: none;                 /* Firefox: hide */
}

/* Firefox: show on hover */
.scrollbar-left:hover {
  scrollbar-width: thin;
  scrollbar-color: var(--btn-dark-color) transparent;
}

/* WebKit (Chrome/Edge/Safari) part only — keep your existing rtl + hover logic if you like */

/* Scrollbar itself (thumb) uses --btn-dark-color */
.scrollbar-left::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}

.scrollbar-left::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Thumb = your dark button color */
.scrollbar-left::-webkit-scrollbar-thumb {
  background-color: var(--btn-dark-bg);
  border-radius: 9999px;
}

/* Top/bottom arrows (buttons) = mint green (accent) */
.scrollbar-left::-webkit-scrollbar-button {
  background-color: var(--accent-color);
}