special-pages/pages/history/app/components/App.module.css
@import url("../../../../shared/styles/variables.css");
@import url("../../styles/base.css");
@import url("../../styles/history-theme.css");

body {
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: var(--body-line-height);
    background-color: var(--history-background-color);
    color: var(--history-text-normal);
}

.layout {
    --sidebar-width: 250px;
    --main-padding-left: 48px;
    --main-padding-right: 76px;
    --scrollbar-width: 18px;

    &[data-layout-mode="reduced"] {
        --sidebar-width: 230px;
        --main-padding-left: 28px;
        --main-padding-right: 36px;
    }

    [data-platform="windows"] & {
        --scrollbar-width: 15px
    }

    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: max-content 1fr;
    grid-template-areas:
            'aside header'
            'aside main';
    overflow: hidden;
    height: 100vh;
    background-color: var(--history-background-color);
}

.header {
    grid-area: header;
    padding-left: var(--main-padding-left);
    padding-right: var(--main-padding-right);
    view-transition-name: header;
    z-index: 1;
    background-color: var(--history-background-color);
}

.search {
    justify-self: flex-end;
}

.aside {
    grid-area: aside;
    padding: 10px 16px;
    /* Nav child will handle this to accommodate a scrollbar */
    padding-right: 0;
    border-right: 1px solid var(--history-surface-border-color);
}

.main {
    grid-area: main;
    overflow: auto;
    padding-left: var(--main-padding-left);
    padding-right: var(--main-padding-right);
    padding-top: 24px;
}

/**
  * The scrollbar is a custom scroller that is used in the main
  * content area and the sidebar nav.
 */
.customScroller {
    overflow-y: scroll;
    padding-right: calc(var(--main-padding-right) - var(--scrollbar-width));
}

/**
 * Windows has access to newer CSS features for styling the scrollbar
 */
[data-platform="windows"] {
    .customScroller {
        overflow-y: auto;
        scrollbar-gutter: stable;
        scrollbar-width: var(--scrollbar-width);
        scrollbar-color: var(--history-scrollbar-controls-color) var(--history-background-color);
    }
}

/**
 * macOS specific styling to handle dark mode - without this full
 * override you cannot change the track color :(
 */
[data-platform="integration"],
[data-platform="macos"] {
    .customScroller {
        --webkit-thumb-color: rgba(136, 136, 136, 0.8);

        &::-webkit-scrollbar {
            width: var(--scrollbar-width);
        }

        &::-webkit-scrollbar-track {
            background-color: var(--history-background-color)
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--webkit-thumb-color);
            border-radius: calc(var(--scrollbar-width) / 2);

            /** faking some padding on the thumb */
            border: 4px solid var(--history-background-color);
        }

        &::-webkit-scrollbar-button {
            display: block;
            background-color: var(--history-background-color);

            /** a small vertical gap to prevent it touching boundaries */
            height: 2px;
        }
    }
}

.paddedError {
    padding: 1rem;
}

.paddedErrorRecovery {
    margin-top: 1rem;
}
