/* The settings scrollbar is shared by full pages, embedded documents and modals.
   Keep native scrolling and deliberately hidden carousel / SimpleBar bars intact. */
:root {
  --cy-scrollbar-size: 10px;
  --cy-scrollbar-track: rgba(255, 255, 255, .03);
  --cy-scrollbar-thumb: var(--cy-theme-2, #cfa66a);
  --cy-scrollbar-thumb-end: var(--cy-theme-3, #f6e7b8);
  --cy-scrollbar-edge: rgba(0, 0, 0, .25);
  --cy-scrollbar-hover: color-mix(in srgb, var(--cy-scrollbar-thumb) 80%, #fff);
  --cy-scrollbar-hover-end: color-mix(in srgb, var(--cy-scrollbar-thumb-end) 80%, #fff);
}
html[data-cy-color-scheme="light"] {
  --cy-scrollbar-track: rgba(59, 43, 85, .035);
  --cy-scrollbar-edge: rgba(255, 255, 255, .55);
  --cy-scrollbar-hover: color-mix(in srgb, var(--cy-scrollbar-thumb) 86%, #5d466f);
  --cy-scrollbar-hover-end: color-mix(in srgb, var(--cy-scrollbar-thumb-end) 86%, #5d466f);
}
/* Firefox uses its standard thin handle and the same theme colors. */
@supports not selector(::-webkit-scrollbar) {
  :where(html, html *) { scrollbar-width: thin; }
}

/* Appearance wins over old per-page !important colors without changing overflow,
   scroll locking, scroll snapping, gutter allocation, or hidden scrollbar display. */
@layer cybox-scrollbar-appearance {
  @supports not selector(::-webkit-scrollbar) {
    html, html * {
      scrollbar-color: var(--cy-scrollbar-thumb) var(--cy-scrollbar-track) !important;
    }
  }
  @supports selector(::-webkit-scrollbar) {
    /* Non-auto standard properties suppress the WebKit gradient in Chromium.
       Exclude controls that intentionally hide their scrollbar, including their
       responsive variants, so their existing none/display:none rules still win. */
    html, html * { scrollbar-color: auto !important; }
    html, html *:not(:where(
      .simplebar-content-wrapper, .simplebar-hide-scrollbar,
      .arena-swipe-pair, .arena-options--languages, .task-practice-editor-tabs,
      .ach-filters-cat, .hw-student-tabs-wrap, .account-learning.is-carousel,
      .challenge-tabs, .fr-tabs, .tests-grid, .tabs-wrap
    )) { scrollbar-width: auto !important; }
  }
  html::-webkit-scrollbar, html *::-webkit-scrollbar {
    width: var(--cy-scrollbar-size) !important;
    height: var(--cy-scrollbar-size) !important;
  }
  html::-webkit-scrollbar-track, html *::-webkit-scrollbar-track {
    background: var(--cy-scrollbar-track) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  html::-webkit-scrollbar-thumb, html *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--cy-scrollbar-thumb), var(--cy-scrollbar-thumb-end)) !important;
    border: 2px solid var(--cy-scrollbar-edge) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  html::-webkit-scrollbar-thumb:hover, html *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--cy-scrollbar-hover), var(--cy-scrollbar-hover-end)) !important;
  }
  html::-webkit-scrollbar-corner, html *::-webkit-scrollbar-corner {
    background: transparent !important;
  }
  /* SimpleBar renders the handle itself; leave its geometry and visibility alone. */
  html .simplebar-track { background: var(--cy-scrollbar-track) !important; }
  html .simplebar-scrollbar::before {
    background: linear-gradient(180deg, var(--cy-scrollbar-thumb), var(--cy-scrollbar-thumb-end)) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  html .simplebar-scrollbar:hover::before {
    background: linear-gradient(180deg, var(--cy-scrollbar-hover), var(--cy-scrollbar-hover-end)) !important;
  }
}