/*
 * Unafin scrollbars
 *
 * Loaded by every layout, including the guest and landing pages that do not
 * pull in app-theme.css, so each token carries the gold default as a fallback.
 * Where app-theme.css is present the bar simply follows the active theme:
 * gold on unafin and dark, blue on classic.
 */

/* Firefox. It takes no gradient and no pseudo element, so it gets the flat
   brand colour and an invisible track, which is the closest match. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--brand, #c7a467) transparent;
}

/* 10px of grab area. The thumb is inset by its own transparent border below,
   so it still reads as a 6px bar. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}

/* Neutral rather than black or white tinted, so the channel stays faint on a
   white page, on the dark sidebar and on the dark theme alike. */
::-webkit-scrollbar-track {
  background: rgba(127, 127, 127, .08);
  border-radius: var(--radius, 6px);
}

::-webkit-scrollbar-thumb {
  border-radius: var(--radius, 6px);
  background: linear-gradient(
    to bottom,
    var(--brand-dark, #9a7c45) 0%,
    var(--brand, #c7a467) 70%,
    var(--brand-bright, #e0c088) 100%
  );

  /* Shrinks the visible bar to 6px while leaving the full 10px grabbable.
     padding-box keeps the gradient out of the border. */
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Brighter and full width on hover: the extra 2px comes from dropping the
   border, which is the only way to grow a thumb without resizing the track. */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    var(--brand, #c7a467) 0%,
    var(--brand-bright, #e0c088) 100%
  );
  border-width: 1px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--brand-bright, #e0c088);
  border-width: 1px;
  background-clip: padding-box;
}

/* Where a horizontal and a vertical bar meet, which DataTables produces.
   Left unset it renders as a pale grey square. */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* The classic sidebar is filled with the same blue as --brand, so a brand
   coloured thumb would disappear into it. The gold themes have a near black
   sidebar and keep the gold. Note each rule restates background-clip, which
   the background shorthand would otherwise reset to border-box and let the
   fill bleed into the transparent border. */
html.theme-classic .app-sidebar {
  scrollbar-color: rgba(255, 255, 255, .5) transparent;
}
html.theme-classic .app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .5);
  background-clip: padding-box;
}
html.theme-classic .app-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .78);
  background-clip: padding-box;
}