$ias-content-padding: 25px;
$header-bar-height: 50px;
$nav-bar-height: 38px;

.ias-page {
    // Using CSS grid for this page. The nav header will take the maximum amount it needs, and the rest goes to the page body.
    display: grid;
    grid-template-rows: max-content 1fr;

    // The root page should take up 100% of the viewable area
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;

    // Simple page (no nav).  Simply add some padding and let the content scroll underneath the page header.
    > .ias-content {
        overflow: auto;
        padding: $ias-content-padding;
    }

    // Page with nav. For a page with a left nav, use css grid to define the columns, and add the padding inside the
    // child elements so the content scrolls independently, and underneath the page header.
    > .ias-content-with-nav {
        display: grid;
        grid-template-columns: 260px 1fr; // Left side navigation gets a fixed width of 260px, right side gets the rest.
        overflow: auto;

        // Style the left navigation directly
        > .ias-left-nav, ux-navigation {
            overflow: auto;
            // Use padding so the scroll bars reach the edge of the available area. The padding is a little tighter on
            // the right side for the navigation pane. The left side padding is 15px for the desired visual effect.
            padding: $ias-content-padding 10px $ias-content-padding 15px;
        }

        // Style whatever component is being displayed on the right (anything but the ux-navigation or router-outlet tags)
        > *:not(.ias-left-nav):not(ux-navigation):not(router-outlet) {
            overflow: auto;
            padding: $ias-content-padding; // Use padding so the scroll bars reach the edge of the available area.
        }
    }
}

.ias-page-header {
    min-width: 0; // This fixes problems with text truncation.  See: https://css-tricks.com/flexbox-truncated-text/

    > .ias-header-bar {
        background-color: $microfocus-primary;
        color: white;
        height: $header-bar-height;
        margin: 0;
        padding: 0;

        display: flex;
        align-items: center;

        > .ias-header-bar_title {
            flex-grow: 1;
            font-size: 20px;
            margin-left: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        > .ias-header-bar_menu {
            margin-right: 15px;
            position: relative;

            > a {
                color: white;
                display: flex;
                align-items: center;

                > .ias-icon {
                    font-size: 16px;
                    margin-left: 5px;
                }
            }

            > .dropdown-menu {
                overflow: hidden;

                // This is a fix for the ux-aspects style overriding the dropdown-menu-right style:
                &.dropdown-menu-right {
                    left: auto;
                    right: 0;
                }
            }
        }
    }

    > .ias-nav-bar {
        background-color: $ias-panel-gray;
        color: $ias-dim-gray;
        font-size: .95rem;
        height: $nav-bar-height;
        padding: 0 15px;

        display: flex;
        align-items: center;

        > ul {
            list-style: none;
            margin: 0;
            padding: 0;

            > li {
                display: inline-block;

                > a {
                    border-width: 0 1px 3px;
                    border-style: solid;
                    border-color: transparent;
                    color: inherit;
                    height: $nav-bar-height;
                    padding: 0 10px;

                    display: flex;
                    align-items: center;

                    &:hover {
                        background-color: $ias-border-gray;
                    }

                    &.active {
                        color: $ias-dark-gray;
                        border-left-color: $ias-border-gray;
                        border-right-color: $ias-border-gray;
                        border-bottom-color: $ias-blue-4;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}

// Provide a class for restricting to the maximum content width.
.ias-max-content-width {
    width: 700px;
}

// Setting the order to 1000 causes the router-outlet to "jump to the end of the line" so it doesn't interfere with css
// grid placement.
.ias-page > router-outlet, .ias-page > .ias-content-with-nav > router-outlet {
    order: 1000;
}