/*
 * Core scrollable surface contract.
 *
 * PDP reviews, specifications and theme-owned overflow cards consume this
 * class so every storefront uses one scrollbar geometry and color.
 */
.torque-pdp-scrollable {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 180ms ease-out;
}

.torque-pdp-scrollable::-webkit-scrollbar {
  width: 0.375rem;
}

.torque-pdp-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.torque-pdp-scrollable::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: transparent;
  transition: background-color 180ms ease-out;
}

.torque-pdp-scrollable.is-scrolling,
.torque-pdp-scrollable:focus-visible {
  scrollbar-color: #dee2e6 transparent;
}

.torque-pdp-scrollable.is-scrolling::-webkit-scrollbar-thumb,
.torque-pdp-scrollable:focus-visible::-webkit-scrollbar-thumb {
  background: #dee2e6;
}