:root {
    --myfirm-scrollbar-size: 10px;
    --myfirm-scrollbar-track: transparent;
    --myfirm-scrollbar-thumb: var(--color-border-strong, var(--vz-border-color, #ced4da));
    --myfirm-scrollbar-thumb-hover: var(--color-text-muted, var(--vz-secondary-color, #878a99));
}

html[data-bs-theme="dark"],
[data-bs-theme="dark"] {
    --myfirm-scrollbar-thumb: var(--color-border-strong, var(--vz-border-color, rgba(255, 255, 255, 0.18)));
    --myfirm-scrollbar-thumb-hover: var(--color-text-muted, var(--vz-secondary-color, #a8b2c0));
}

:where(
    html,
    body,
    .main-content,
    .page-content,
    .offcanvas-body,
    .modal-body,
    .dropdown-menu,
    .table-responsive,
    .simplebar-content-wrapper,
    [class*="-scroll"],
    [class*="scroll-"],
    .myfirm-platform-table-card,
    .myfirm-platform-json,
    .myfirm-documents-sidebar,
    .myfirm-documents-detail-panel
) {
    scrollbar-color: var(--myfirm-scrollbar-thumb) var(--myfirm-scrollbar-track);
    scrollbar-width: thin;
}

:where(
    html,
    body,
    .main-content,
    .page-content,
    .offcanvas-body,
    .modal-body,
    .dropdown-menu,
    .table-responsive,
    .simplebar-content-wrapper,
    [class*="-scroll"],
    [class*="scroll-"],
    .myfirm-platform-table-card,
    .myfirm-platform-json,
    .myfirm-documents-sidebar,
    .myfirm-documents-detail-panel
)::-webkit-scrollbar {
    width: var(--myfirm-scrollbar-size);
    height: var(--myfirm-scrollbar-size);
}

:where(
    html,
    body,
    .main-content,
    .page-content,
    .offcanvas-body,
    .modal-body,
    .dropdown-menu,
    .table-responsive,
    .simplebar-content-wrapper,
    [class*="-scroll"],
    [class*="scroll-"],
    .myfirm-platform-table-card,
    .myfirm-platform-json,
    .myfirm-documents-sidebar,
    .myfirm-documents-detail-panel
)::-webkit-scrollbar-track {
    background: var(--myfirm-scrollbar-track);
    border-radius: 999px;
}

:where(
    html,
    body,
    .main-content,
    .page-content,
    .offcanvas-body,
    .modal-body,
    .dropdown-menu,
    .table-responsive,
    .simplebar-content-wrapper,
    [class*="-scroll"],
    [class*="scroll-"],
    .myfirm-platform-table-card,
    .myfirm-platform-json,
    .myfirm-documents-sidebar,
    .myfirm-documents-detail-panel
)::-webkit-scrollbar-thumb {
    min-height: 36px;
    background-color: var(--myfirm-scrollbar-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

:where(
    html,
    body,
    .main-content,
    .page-content,
    .offcanvas-body,
    .modal-body,
    .dropdown-menu,
    .table-responsive,
    .simplebar-content-wrapper,
    [class*="-scroll"],
    [class*="scroll-"],
    .myfirm-platform-table-card,
    .myfirm-platform-json,
    .myfirm-documents-sidebar,
    .myfirm-documents-detail-panel
)::-webkit-scrollbar-thumb:hover {
    background-color: var(--myfirm-scrollbar-thumb-hover);
}