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

body {
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: var(--body-line-height);
    overflow: hidden;
    height: 100vh;
}

.tube {
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-16);
    margin-left: auto;
    margin-right: auto;
    /* prevent the scrollbar affecting the width */
    padding-left: calc(100vw - 100%);
}

body:has([data-reset-layout="true"]) .tube {
    padding-top: 0;
}
body[data-animate-background="true"] {
    transition: background-color .3s;
}

:global(.layout-centered) {
    margin-inline: auto;
    width: 100%;
    max-width: calc(504 * var(--px-in-rem));
}

:global([data-entry-point="omnibar"]) {
    max-width: calc(620 * var(--px-in-rem));
}

:global(.vertical-space) {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/** Don't affect layout if empty (eg: if a widget was toggled) **/
:global(.layout-centered:empty) {
    display: contents;
}

.layout {
    position: relative;
    z-index: 1;
}

.main {
    height: 100vh;
    overflow: auto;
    grid-area: main;
    color: var(--ntp-text-normal);
}

.themeContext {
    color: var(--ntp-text-normal);
}

.mainLayout {
    will-change: transform;
    transition: transform .3s;

    [data-drawer-visibility='visible'] & {
        transform: translateX(calc(0px - var(--ntp-combined-width) / 2));
    }
}

.mainScroller {
    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-track {
        border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background: rgb(108, 108, 108);
        border-radius: 6px;
    }
}

.content {
    width: 100%;
}

.aside {
    color: var(--ntp-text-normal);
    background: var(--ntp-surfaces-panel-background-color);
    grid-area: aside;
    height: 100vh;
    z-index: 1;
    overflow: auto;
    width: var(--ntp-combined-width);

    /** todo: is this re-usable in any way, or unique? */
    box-shadow: 0px 0px 1px 0px #FFF inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12);

    &[data-theme=dark] {
        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.60) inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.16), 0px 8px 12px 0px rgba(0, 0, 0, 0.24);
    }

    .layout[data-animating="true"] & {
        overflow: hidden;
    }

    .layout[data-animating="false"] &[aria-hidden=true] {
        visibility: hidden;
        opacity: 0;
    }
}

.asideLayout {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    will-change: transform;
    transform: translateX(100%);
    transition: transform .3s;

    [data-drawer-visibility="visible"] & {
        transform: translateX(0)
    }
}

.asideContent {
    opacity: 1;
    width: var(--ntp-drawer-width);
}

.asideScroller {
    &::-webkit-scrollbar {
        width: var(--ntp-drawer-scroll-width);
    }

    &::-webkit-scrollbar-track {
        border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background: rgb(108, 108, 108);
        border: 4px solid var(--ntp-surfaces-panel-background-color);
        border-radius: 6px;
    }
}

.paddedError {
    padding: 1rem;
}
.paddedErrorRecovery {
    margin-top: 1rem;

}