/* ==========================================================================
   Global Scrollbar Styling — Soft, brand-derived
   Uses platform CSS variables with reduced opacity for a gentle look
   ========================================================================== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--iq-brand-color-1, #003399) 35%, transparent) transparent;
}

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

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

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--iq-brand-color-1, #003399) 30%, transparent);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--iq-brand-color-1, #003399) 55%, transparent);
}

/* Corner piece */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Smaller scrollbar for nested containers */
.course-sidebar-sticky::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar {
  width: 4px;
}

.course-sidebar-sticky::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--iq-brand-color-1, #003399) 25%, transparent);
  border-radius: 100px;
}

.course-sidebar-sticky::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--iq-brand-color-1, #003399) 50%, transparent);
}