:root {
  --fdc-scrollbar-size: 8px;
  --fdc-scrollbar-thumb: #8eb4ef;
  --fdc-scrollbar-thumb-start: #3b82f6;
  --fdc-scrollbar-thumb-end: #2563eb;
  --fdc-scrollbar-thumb-hover-start: #3b82f6;
  --fdc-scrollbar-thumb-hover-end: #2563eb;
  --fdc-shared-scrollbar-size: var(--fdc-scrollbar-size);
  --fdc-shared-scrollbar-thumb: var(--fdc-scrollbar-thumb);
  --fdc-shared-scrollbar-track-margin: 6px 0;
  --fdc-panel-scrollbar-gutter: stable;
  --fdc-dropdown-scrollbar-reserve: var(--fdc-shared-scrollbar-size);
}

:root[data-theme='dark'] {
  --fdc-scrollbar-thumb: #4b74b8;
  --fdc-scrollbar-thumb-start: #3b82f6;
  --fdc-scrollbar-thumb-end: #2563eb;
  --fdc-scrollbar-thumb-hover-start: #2563eb;
  --fdc-scrollbar-thumb-hover-end: #1d4ed8;
}

:where(
  .pool-scroll,
  .deck-stage-scroll,
  .pool-shell,
  .deck-panel-scroll,
  .page-panel,
  .results-shell,
  .filter-panel,
  .filter-box,
  .filters,
  .saved-deck-list,
  .source-deck-list,
  .list-scroll,
  .map-detail-body-scroll,
  .filter-options,
  .modal-panel,
  .account-modal-panel,
  .fdc-privacy-preferences-dialog,
  .fdc-shared-report-modal,
  .board-post-list,
  .modal-body,
  .shop-preview .official-list,
  .photo-upload-list,
  .suggest-preview-panel,
  .home-search-results,
  .type-tag-filter-options,
  .suggest-field-block.suggest-field-grow .field-area,
  .map-filter-toolbar .top-game-chips,
  .search-actions,
  body.mobile-filters-open .filter-box,
  body.mobile-filters-open .filters,
  body.riftbound-filters-open .filter-region
) {
  scrollbar-width: thin;
  scrollbar-color: var(--fdc-shared-scrollbar-thumb) transparent;
}

:where(
  .pool-scroll,
  .deck-stage-scroll,
  .pool-shell,
  .deck-panel-scroll,
  .page-panel,
  .results-shell,
  .filter-panel,
  .filter-box,
  .filters,
  .saved-deck-list,
  .source-deck-list,
  .filter-options,
  .modal-panel,
  .account-modal-panel,
  .fdc-privacy-preferences-dialog,
  .fdc-shared-report-modal,
  .board-post-list,
  .modal-body,
  .shop-preview .official-list,
  .photo-upload-list,
  .suggest-preview-panel,
  .home-search-results,
  .type-tag-filter-options,
  .suggest-field-block.suggest-field-grow .field-area,
  body.mobile-filters-open .filter-box,
  body.mobile-filters-open .filters,
  body.riftbound-filters-open .filter-region
) {
  scrollbar-gutter: var(--fdc-panel-scrollbar-gutter, stable);
}

.list-scroll {
  scrollbar-gutter: var(--fdc-list-scrollbar-gutter, stable);
}

.map-detail-body-scroll {
  scrollbar-gutter: stable both-edges;
}

:where(
  .pool-scroll,
  .deck-stage-scroll,
  .pool-shell,
  .deck-panel-scroll,
  .page-panel,
  .results-shell,
  .filter-panel,
  .filter-box,
  .filters,
  .saved-deck-list,
  .source-deck-list,
  .list-scroll,
  .map-detail-body-scroll,
  .filter-options,
  .modal-panel,
  .account-modal-panel,
  .fdc-privacy-preferences-dialog,
  .fdc-shared-report-modal,
  .board-post-list,
  .modal-body,
  .shop-preview .official-list,
  .photo-upload-list,
  .suggest-preview-panel,
  .home-search-results,
  .type-tag-filter-options,
  .suggest-field-block.suggest-field-grow .field-area,
  .map-filter-toolbar .top-game-chips,
  .search-actions,
  body.mobile-filters-open .filter-box,
  body.mobile-filters-open .filters,
  body.riftbound-filters-open .filter-region
)::-webkit-scrollbar {
  width: var(--fdc-shared-scrollbar-size);
  height: var(--fdc-shared-scrollbar-size);
}

:where(
  .pool-scroll,
  .deck-stage-scroll,
  .pool-shell,
  .deck-panel-scroll,
  .page-panel,
  .results-shell,
  .filter-panel,
  .filter-box,
  .filters,
  .saved-deck-list,
  .source-deck-list,
  .list-scroll,
  .map-detail-body-scroll,
  .filter-options,
  .modal-panel,
  .account-modal-panel,
  .fdc-privacy-preferences-dialog,
  .fdc-shared-report-modal,
  .board-post-list,
  .modal-body,
  .shop-preview .official-list,
  .photo-upload-list,
  .suggest-preview-panel,
  .home-search-results,
  .type-tag-filter-options,
  .suggest-field-block.suggest-field-grow .field-area,
  .map-filter-toolbar .top-game-chips,
  .search-actions,
  body.mobile-filters-open .filter-box,
  body.mobile-filters-open .filters,
  body.riftbound-filters-open .filter-region
)::-webkit-scrollbar-track {
  background: transparent;
  margin: var(--fdc-shared-scrollbar-track-margin);
}

.list-scroll::-webkit-scrollbar-track,
.map-detail-body-scroll::-webkit-scrollbar-track {
  margin: 0;
}

:where(
  .pool-scroll,
  .deck-stage-scroll,
  .pool-shell,
  .deck-panel-scroll,
  .page-panel,
  .results-shell,
  .filter-panel,
  .filter-box,
  .filters,
  .saved-deck-list,
  .source-deck-list,
  .list-scroll,
  .map-detail-body-scroll,
  .filter-options,
  .modal-panel,
  .account-modal-panel,
  .fdc-privacy-preferences-dialog,
  .fdc-shared-report-modal,
  .board-post-list,
  .modal-body,
  .shop-preview .official-list,
  .photo-upload-list,
  .suggest-preview-panel,
  .home-search-results,
  .type-tag-filter-options,
  .suggest-field-block.suggest-field-grow .field-area,
  .map-filter-toolbar .top-game-chips,
  .search-actions,
  body.mobile-filters-open .filter-box,
  body.mobile-filters-open .filters,
  body.riftbound-filters-open .filter-region
)::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--fdc-scrollbar-thumb-start) 0%,
    var(--fdc-scrollbar-thumb-end) 100%
  );
  border-radius: 999px;
  border: 0;
  background-clip: border-box;
}

:where(
  .pool-scroll,
  .deck-stage-scroll,
  .pool-shell,
  .deck-panel-scroll,
  .page-panel,
  .results-shell,
  .filter-panel,
  .filter-box,
  .filters,
  .saved-deck-list,
  .source-deck-list,
  .list-scroll,
  .map-detail-body-scroll,
  .filter-options,
  .modal-panel,
  .account-modal-panel,
  .fdc-privacy-preferences-dialog,
  .fdc-shared-report-modal,
  .board-post-list,
  .modal-body,
  .shop-preview .official-list,
  .photo-upload-list,
  .suggest-preview-panel,
  .home-search-results,
  .type-tag-filter-options,
  .suggest-field-block.suggest-field-grow .field-area,
  .map-filter-toolbar .top-game-chips,
  .search-actions,
  body.mobile-filters-open .filter-box,
  body.mobile-filters-open .filters,
  body.riftbound-filters-open .filter-region
):hover::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--fdc-scrollbar-thumb-hover-start) 0%,
    var(--fdc-scrollbar-thumb-hover-end) 100%
  );
}

:where(
  .pool-scroll,
  .deck-stage-scroll,
  .pool-shell,
  .deck-panel-scroll,
  .page-panel,
  .results-shell,
  .filter-panel,
  .filter-box,
  .filters,
  .saved-deck-list,
  .source-deck-list,
  .list-scroll,
  .map-detail-body-scroll,
  .filter-options,
  .modal-panel,
  .account-modal-panel,
  .fdc-privacy-preferences-dialog,
  .fdc-shared-report-modal,
  .board-post-list,
  .modal-body,
  .shop-preview .official-list,
  .photo-upload-list,
  .suggest-preview-panel,
  .suggest-field-block.suggest-field-grow .field-area,
  .map-filter-toolbar .top-game-chips,
  .search-actions,
  body.mobile-filters-open .filter-box,
  body.mobile-filters-open .filters,
  body.riftbound-filters-open .filter-region
)::-webkit-scrollbar-corner {
  background: transparent;
}