/* Compare response panes only: keep the track transparent, even on hover/drag. */
#compareCont .cmp-body,
.compare-page .col-body {
  --cmp-scrollbar-thumb: color-mix(in srgb, var(--text-color, currentColor) 25%, transparent);
  scrollbar-width: thin;
  scrollbar-color: var(--cmp-scrollbar-thumb) transparent;
}

/* Chromium/WebKit: explicit dimensions prevent macOS overlay hover expansion.
   Reset the standard properties here so they don't override these pseudo-elements. */
@supports selector(::-webkit-scrollbar) {
  #compareCont .cmp-body,
  .compare-page .col-body {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  #compareCont .cmp-body::-webkit-scrollbar,
  .compare-page .col-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
  }
  #compareCont .cmp-body::-webkit-scrollbar-track,
  #compareCont .cmp-body::-webkit-scrollbar-track:hover,
  #compareCont .cmp-body::-webkit-scrollbar-track:active,
  .compare-page .col-body::-webkit-scrollbar-track,
  .compare-page .col-body::-webkit-scrollbar-track:hover,
  .compare-page .col-body::-webkit-scrollbar-track:active {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #compareCont .cmp-body::-webkit-scrollbar-thumb,
  #compareCont .cmp-body::-webkit-scrollbar-thumb:hover,
  #compareCont .cmp-body::-webkit-scrollbar-thumb:active,
  .compare-page .col-body::-webkit-scrollbar-thumb,
  .compare-page .col-body::-webkit-scrollbar-thumb:hover,
  .compare-page .col-body::-webkit-scrollbar-thumb:active {
    background: var(--cmp-scrollbar-thumb);
    border-radius: 8px;
    border: 0;
    box-shadow: none;
  }
  #compareCont .cmp-body::-webkit-scrollbar-button,
  .compare-page .col-body::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  #compareCont .cmp-body::-webkit-scrollbar-corner,
  .compare-page .col-body::-webkit-scrollbar-corner {
    background: transparent;
  }
}