@import '../../_PageStyles.scss';
$pageContentHorizontalPadding: $spacing-32;
$pageContentVerticalPadding: $spacing-16;
$pageHeaderMargin: $spacing-12;

.bolt-page {
    > .bolt-tabbar {
        padding: 0px $pageContentHorizontalPadding 0px ($pageContentHorizontalPadding - $spacing-8);
    }

    > .bolt-header {
        // The header itself will have 20px of right/left padding,
        // so we just need to add on 12 px of margin on either side to achieve the
        // desired total of 32px.
        padding-top: 24px;
        padding-bottom: 0px;

        margin-left: $pageHeaderMargin;
        margin-right: $pageHeaderMargin;

        // There isn't any padding bottom on the page header (it is assumed that a TabBar
        // or different component will provide this content). However, a sticky TabBar has
        // z-index: 2 in order to appear on top of the content when it is sticky. Without this,
        // the focus-rect of the buttons in the command bar will be clipped.
        z-index: 3;

        // Ignore no-right-padding only in the context of a page
        .bolt-header-commandbar-no-right-padding {
            padding-right: $header-command-bar-right-padding;
        }
    }

    > .vss-FilterBar {
        margin-left: $pageContentHorizontalPadding;
        margin-right: $pageContentHorizontalPadding;
    }

    /// Apply to your content within a page to get standard left/right/bottom padding.
    /// @group page|layout
    .page-content {
        padding-left: $pageContentHorizontalPadding;
        padding-right: $pageContentHorizontalPadding;
        padding-bottom: $pageContentVerticalPadding;
    }

    /// Apply to your content within a page to get standard top paddding
    /// @group page|layout
    .page-content-top {
        padding-top: $pageContentVerticalPadding;
    }

    /// Apply to your content within a page to get standard bottom paddding
    /// @group page|layout
    .page-content-bottom {
        padding-bottom: $pageContentVerticalPadding;
    }

    /// Apply to your content within a page to get standard left paddding
    /// @group page|layout
    .page-content-left {
        padding-left: $pageContentHorizontalPadding;
    }

    /// Apply to your content within a page to get standard right paddding
    /// @group page|layout
    .page-content-right {
        padding-right: $pageContentHorizontalPadding;
    }
}

.bolt-page-grey {
    background-color: $neutral-2;
}

.bolt-page-white {
    background-color: $backgroundColor;
}