/**
 * Admin data grids (LTR and RTL): the grid scrolls sideways inside its own wrapper instead of
 * widening the page (PO-89, R45).
 *
 * Core leaves .admin__data-grid-wrap at overflow: visible, so a table wider than the content column
 * (order, product, customer grids at laptop widths) pushed the whole page, header and menu included,
 * sideways. Core's sticky header already listens for scroll on this wrapper
 * (ui/js/grid/sticky/sticky.js) and keeps its columns aligned once the wrapper is the scroller.
 */
.admin__data-grid-wrap[data-role="grid-wrapper"] {
    max-width: 100%;
    overflow-x: auto;
}

.admin__data-grid-outer-wrap {
    max-width: 100%;
}

/*
 * Thin scroller above the grid, kept in sync with the wrapper by MMD_Base/js/grid-top-scroll (R45 follow-up:
 * "a scroll bar at the top of the table too"). Added only while the table overflows; inherits the page
 * direction, so it works in RTL. The spacer's width is set by the script.
 */
.mmd-grid-top-scroll {
    display: none;
    height: 14px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.mmd-grid-top-scroll > div {
    height: 1px;
}

/*
 * Always-visible horizontal scrollbars on the grid and the top scroller. macOS overlay scrollbars
 * (the default with a trackpad) stay hidden until the user scrolls, so neither bar was discoverable.
 * Styling ::-webkit-scrollbar makes Chrome, Edge and Safari draw a classic, permanent bar; Firefox
 * gets the standard properties only, because Chrome ignores the webkit rules once scrollbar-color is set.
 */
.admin__data-grid-wrap[data-role="grid-wrapper"]::-webkit-scrollbar,
.mmd-grid-top-scroll::-webkit-scrollbar {
    height: 10px;
}

.admin__data-grid-wrap[data-role="grid-wrapper"]::-webkit-scrollbar-track,
.mmd-grid-top-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.admin__data-grid-wrap[data-role="grid-wrapper"]::-webkit-scrollbar-thumb,
.mmd-grid-top-scroll::-webkit-scrollbar-thumb {
    background: #adadad;
    border-radius: 5px;
}

.admin__data-grid-wrap[data-role="grid-wrapper"]::-webkit-scrollbar-thumb:hover,
.mmd-grid-top-scroll::-webkit-scrollbar-thumb:hover {
    background: #858585;
}

@supports not selector(::-webkit-scrollbar) {
    .admin__data-grid-wrap[data-role="grid-wrapper"],
    .mmd-grid-top-scroll {
        scrollbar-color: #adadad #f1f1f1;
    }
}