/*
 * Scrollbars — `.app-scroll` replaces the browser's default scrollbar with a
 * thin, rounded thumb in the app's colours on a transparent track. It gets
 * brighter while the pointer is over the area or the thumb.
 * Add the class to any scrolling container (conversation messages first).
 */

.app-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-selection) transparent;
}

.app-scroll:hover {
  scrollbar-color: var(--color-comment) transparent;
}

/* Safari has no scrollbar-color yet. Where it's supported, Chrome ignores the
   ::-webkit-scrollbar rules, so they only apply here. */
@supports not (scrollbar-color: auto) {
  .app-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .app-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .app-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-selection);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: var(--radius-pill);
  }

  .app-scroll:hover::-webkit-scrollbar-thumb {
    background-color: var(--color-comment);
  }

  .app-scroll::-webkit-scrollbar-corner {
    background: transparent;
  }
}