/* Horizontal scrollbars share one treatment across both site editions. */
@supports selector(::-webkit-scrollbar) {
  :is(.concept-compare, .archive-index nav, .doc table, .overflow-x-auto, .overflow-x-scroll, [data-horizontal-scroll])::-webkit-scrollbar {
    height: 12px;
    background: transparent;
  }

  ::-webkit-scrollbar-track:horizontal {
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  ::-webkit-scrollbar-thumb:horizontal {
    border: 5px solid transparent;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sp-brass, var(--amber, currentColor)) 55%, transparent);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:horizontal:hover,
  :focus-within::-webkit-scrollbar-thumb:horizontal {
    background-color: var(--sp-brass, var(--amber, currentColor));
  }

  ::-webkit-scrollbar-button:horizontal {
    display: none;
    width: 0;
    height: 0;
  }
}

/* Standard-property fallback for the site's horizontal scrolling containers. */
@supports not selector(::-webkit-scrollbar) {
  :where(.concept-compare, .archive-index nav, .stay-panel, .resource-download-panel, .doc table, .overflow-x-auto, .overflow-auto) {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--sp-brass, var(--amber, currentColor)) 55%, transparent) transparent;
  }

  :where(.concept-compare, .archive-index nav, .stay-panel, .resource-download-panel, .doc table, .overflow-x-auto, .overflow-auto):hover,
  :where(.concept-compare, .archive-index nav, .stay-panel, .resource-download-panel, .doc table, .overflow-x-auto, .overflow-auto):focus-within {
    scrollbar-color: var(--sp-brass, var(--amber, currentColor)) transparent;
  }
}