@mobile-button-size: 56px;

/* Navigation base, used for both desktop & mobile navigation */

.nav-sidebar .dashboard-link:not(.active) a:focus,
.nav-sidebar .dashboard-link:not(.active) a:hover {
    background: var(--color-ct-nav-main-hover);
    background-image: linear-gradient(to left, var(--color-ct-nav-main-border) 1px, var(--color-ct-nav-main-hover) 1px);
    color: var(--color-ct-nav-hover-text);
    border-color: var(--color-ct-nav-main-border);
}

.nav-item-pf-header {
    color: var(--color-gray-1);
    font-size: 16px;
    margin: 18px 20px 10px 20px;
}

.area-ct-subnav {
    background: var(--color-ct-nav-sub);
    flex: none;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    opacity: 1;

    mark {
        padding-left: 0;
        padding-right: 0;
        font-weight: bold;
        color: var(--color-ct-nav-active-text);
        background: var(--pf-global--BackgroundColor--dark-400);
    }

    > .search {
        margin: 1rem 1.5rem;

        > input.form-control {
            background: var(--color-ct-nav);
            border: 0 solid var(--color-ct-nav);
            border-width: 2px 0;
            color: var(--color-ct-nav-main-text) !important;
            padding: 0 0.5rem 0 32px !important;
            transition: var(--pf-global--Transition);

            &::placeholder {
                color: var(--color-ct-nav-text);
                opacity: 0.8;
            }

            &:focus {
                border-bottom-color: var(--color-ct-nav-main-text);
            }
        }

        > .form-control-feedback {
            color: var(--color-ct-nav-text);
            opacity: 0.7;
            margin: 0.5rem;
            right: auto;
            width: 16px;
            height: 16px;
            left: 0;
            transition: var(--pf-global--Transition);
        }

        > input.form-control:focus ~ .form-control-feedback {
            color: var(--color-ct-nav-active-text);
            opacity: 1;
        }
    }

    .hint {
        font-size: var(--pf-global--FontSize--sm);
    }

    .list-group-item .hint {
        opacity: 0.8;
    }

    .link-button.hint {
        color: var(--pf-global--active-color--300);
    }

    .list-group {
        border: none;
        margin: 1rem 0;
        position: relative;

        &:first-child {
            margin-top: 0;
        }

        + .list-group {
            padding-top: calc(1rem + 1px);

            &::before {
                border-top: 1px solid var(--pf-global--BorderColor--200);
                content: '';
                position: absolute;
                top: 0;
                right: 1.5rem;
                left: 1.5rem;
                opacity: 0.75;
            }
        }
    }

    .non-menu-item {
        display: flex;
        justify-content: center;
    }

    .list-group-item {
        padding: 0;
        background: inherit;
        border: none;
        z-index: 1;

        > a {
            padding: 0.5rem 1.5rem;
            display: block;
            color: var(--color-ct-nav-text);
            text-decoration: none;
        }

        > a:focus,
        &:hover,
        &.active {
            /* Move hover & selected above overflow fade */
            z-index: 3;
        }

        > a:focus,
        &:hover > a {
            background: var(--color-ct-nav-hover);
            color: var(--color-ct-nav-hover-text);
        }

        &.active {
            background: var(--color-ct-nav-active);

            > a {
                color: var(--color-ct-nav-active-text);
                font-weight: 700;
            }
        }
    }

    .disabled {
        color: var(--color-ct-nav-text);
        font-size: var(--pf-global--FontSize--sm);

        &:focus,
        &:hover {
            color: var(--color-ct-nav-text);
            background-color: initial;
            cursor: default;
        }
    }

    /* Fade end of the host menu to indicate more content is available */

    &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        height: 2rem;
        pointer-events: none;
        z-index: 2;
        /* Accomodate scrollbars with margin (IE11 needs 18px; rest are less) */
        margin-right: 18px;
        background: var(--color-ct-nav-cover-down);
        bottom: 0;
        height: 4rem;
    }
}

.nav-sidebar > .list-group {
    .dashboard-link {
        display: block;

        &:not(.active) .fa {
            color: var(--color-subtle-copy) !important;
        }
    }
}


.machine-dropdown {
    position: relative;
    flex: none;

    &:after {
        content: "";
        position: absolute;
        margin: 0 10px; // Jut out 5 pixels (15 - 5) on the sides
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--color-border);
    }
}

.machine-dropdown > .dropdown-toggle span,
.host-apps a {
    overflow: hidden;
    text-overflow: ellipsis;
}

.host-apps {
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    scrollbar-color: var(--pf-global--Color--400) var(--pf-global--BackgroundColor--dark-200)
}

.area-ct-content {
    > iframe {
        height: 100%;
    }

    > .curtains-ct {
        position: static !important;
    }
}

/* Desktop navigation */
@media screen and (min-width: 768px) {
    .area-ct-navbar {
        flex: none;
        min-width: 100%;
    }

    .area-ct-content {
        flex: auto;
        position: relative;

        /* Position as absolute to make things work on old Chrome versions,
           mainly to make tests pass */
        > iframe {
            position: absolute;
        }

        > .curtains-ct {
            position: absolute !important;
        }

        > iframe,
        > .curtains-ct {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    .area-ct-body {
        position: relative;
        flex: auto;
        z-index: 3;
        display: flex;
        /* IE11 needs to have the flex-basis set to page max,
           else it stretches too tall */
        flex-basis: 100%;
    }

    .nav-pf-vertical {
        position: static !important;
        height: 100%;
        border-right-width: 0;
        top: 0;
    }

    .nav-sidebar-wrap {
        flex: none;
        z-index: 3;

        &:not(.expanded) {
            width: unit(@sidebar-width-sm, px);

            .nav-sidebar {
                width: unit(@sidebar-width-sm, px);
            }

            .list-group-item-value {
                opacity: 0;
            }
        }
    }

    .nav-sidebar-wrap.expanded .nav-sidebar {
        width: auto;
    }

    .nav-sidebar-wrap:not(.expanded) .nav-sidebar {
        /* Use absolute position to make old Chrome (2015 Dec) tests pass */
        position: absolute !important;
    }

    .nav-sidebar {
        height: 100%;
        transition: all 150ms ease-out;
        box-shadow: 0 0;
        background: var(--color-ct-nav-main);
        background-image: linear-gradient(to left, var(--color-ct-nav-main-border) 1px, var(--color-ct-nav-main) 1px);

        span.first-letter {
            font-size: 0px !important;
            color: #d1d1d1;

            &:first-letter {
                font-size: 22px !important;
            }
        }

        .fa {
            margin-left: -4px;
            margin-top: -1px;

            &:not(.first-letter) {
                font-size: 22px !important;
            }
        }

        .list-group-item {
            border-right-width: 0;
            overflow: hidden;

            > a {
                // Patternfly now sets & unsets padding-right;
                // ...so we'll set it once again
                padding-right: 20px;

                .nav-sidebar-wrap.expanded & {
                    padding-right: 1rem;
                    width: auto;
                }
            }

            &:focus {
                background: active;
            }
        }
    }

    .nav-sidebar-wrap.expanded {
        .list-group-item > a {
            padding: 0.5rem 1rem 0.25rem;
            font-size: var(--pf-global--FontSize--sm);
            min-height: 4rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            height: auto;
            white-space: normal;

            > .fa,
            > .pficon,
            > .list-group-item-value {
                margin: 0;
                padding: 0 !important;
            }

            > .list-group-item-value {
                max-width: 8em;
            }
        }
    }

    .nav-sidebar-wrap:not(.expanded) .nav-sidebar:not(.clicked):focus-within,
    .nav-sidebar-wrap:not(.expanded) .nav-sidebar:not(.clicked):hover {
        width: unit(@sidebar-width-full, px);
        box-shadow: 0 0 3px rgba(0,0,0,0.5), 0 0 32px rgba(0,0,0,0.75);
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0,1.2,0.8,1);
        transition-delay: 300ms;

        .list-group-item-value {
            transition-duration: 300ms;
            transition-delay: 300ms;
            opacity: 1;
        }

        .first-letter {
            opacity: 0;
        }
    }

    .nav-sidebar-wrap:not(.expanded) .nav-sidebar:not(.clicked):focus-within {
        transition-delay: 0;
    }

    .single-nav {
        .nav-sidebar {
            display: none;
        }

        .nav-sidebar-wrap {
            width: 0px;
        }

        .area-ct-subnav {
            left: 0px;
        }
    }

    .area-ct-layout {
        display: flex;
        width: 100%;
        height: 100%;
        flex-flow: column;
        align-content: stretch;
    }

    .area-ct-subnav {
        visibility: visible !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 15em;
    }
}

/* Mobile navigation */
@media screen and (max-width: 767px) {
    .area-ct-navbar, .area-ct-body {
        align-content: stretch;
        align-items: stretch;

        a {
            padding: 12px 15px;
        }
    }

    /* Layout UI in CSS grids
    (all mobile browsers support this new layout type)

    How this works:

    CSS grids version 1 is now implemented in all mobile browsers; we can use it.
    However, display: container and subgrids are not implemented in Chrome yet.
    To work around this, we do a little more complex gridding by overlapping
    child grids on top of the parent grid. We basically set up the main grid
    as with a gutter of @mobile-button-size ("56px") on the top, right side,
    and bottom. We then stretch the child grids to this.

    The elements are then assigned grid names with 'grid-area' and placed in the
    grid using 'grid-template-areas', based on their immediate parent (which is
    set as a grid display type).

    Some grid-areas override their template placement with grid-columns and
    grid-rows. The most notible being the navmenu, so that it can overlap
    content. The value for grid-colums is either a single number or first/last+1
    (which basically means go from first and stop when it hits the grid
    column/row _after_ the one you want to last fill).

    Note: Due to less, we have to wrap some of the values in ~"" so that they
    will be passed directly to the resulting CSS... else less will want to try
    to do math, which isn't want we want.

    Tip: Firefox dev tools let you visualize grids in the "layout" subtab of the
    "inspector" tab.
    */

    .area-ct-layout, .area-ct-body, .area-ct-navbar {
        display: grid;
        grid-template-columns: auto @mobile-button-size;
        grid-template-rows: @mobile-button-size 1fr @mobile-button-size;
        align-content: end;
    }

    .area-ct-layout {
        grid-template-areas:
            "content content"
            "content content"
            "nav topbar";

        height: 100%;
        width: 100%;
    }

    .area-ct-body {
        /* Stretch the nav wrapper to the same area on the parent grid */
        grid-column: ~"1/3";
        grid-row: ~"1/4";
        // As Chrome on Mobile is wonky,
        // here's an alternate way to set the size that works everywhere
        grid-template-rows: ~"@{mobile-button-size} calc(100% - @{mobile-button-size} * 2) @{mobile-button-size}";
        z-index: 2;

        /* Pass through mouse events */
        pointer-events: none;

        grid-template-areas:
            "content content"
            "content content"
            "nav empty";

        > * {
            /* Allow mouse events for children */
            pointer-events: auto;
        }
    }

    .area-ct-navbar {
        /* Create another child grid and stretch it to the parent grid */
        pointer-events: none;
        display: grid;
        background: transparent;
        border: none;

        grid-template:
            "notmenu menu menu"
            "notheader notheader header";

        grid-area: topbar;
        grid-column: ~"1/3"; /* Expand to the whole column */
        grid-row: ~"2/4";
        grid-template-rows: auto @mobile-button-size;
        grid-template-columns: minmax(@mobile-button-size, auto) auto @mobile-button-size;

        z-index: 3;

        > * {
            pointer-events: auto;
        }

        &:before,
        &:after {
            display: none;
        }
    }

    .navbar-header {
        grid-area: header;
        background: var(--color-ct-nav-main);
        border: 1px solid var(--color-ct-nav-main-border);
        border-width: 1px 0 0 !important; /* PF sets border-bottom */
    }

    .navbar-collapse {
        grid-area: menu;
        align-self: end;
        background: var(--color-ct-nav);
    }

    .navbar-brand {
        display: none;
    }

    .navbar-toggle {
        float: right !important;
        margin: 0 !important;
        width: 100%;
        height: 100%;
    }

    .area-ct-content {
        display: block;
        grid-area: content;
        z-index: 1;

        > iframe {
            animation: navFadeIn 300ms;
        }
    }

    .nav-sidebar-wrap {
        grid-area: nav;
        z-index: 3;
        max-width: ~"calc(100vw - @{mobile-button-size})";
        overflow: auto;
        overflow-y: hidden;
        position: relative;
    }

    .nav-sidebar {
        position: static !important;
        width: auto;
        max-width: 100%;
        overflow: hidden;
        overflow-x: auto;
        background: linear-gradient(to bottom, var(--color-ct-nav-main-border), var(--color-ct-nav-main) 1px);
        border: none;

        ul, li {
            padding: 0;
            margin: 0;
        }

        > .list-group {
            position: relative;
            display: flex;

            li {
                flex: auto;
            }
        }

        .list-group-item {
            width: auto !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            position: static;

            &:first-child {
                // Re-add border that PF takes away
                border-top-width: 1px !important;
                border-top-style: solid !important;
            }

            &:first-child {
                border-color: var(--color-ct-nav-main-border);
            }

            &.menu-visible:first-child {
                border-color: var(--color-ct-nav-main);
            }

            &:only-child {
                max-width: 25vw;
            }

            a {
                display: inline-block !important;
                padding: 6px 12px !important;
                padding: 0;
                text-align: center;
                width: auto !important;
                min-width: 80px;
                width: 100% !important;
                height: @mobile-button-size !important;
                margin-bottom: 12px; // Hack to hide the scrollbar
            }

            &.active {
                z-index: 2;

                &:hover, &:focus {
                    // Override PF border
                    border-color: var(--color-ct-nav-main-border);
                }

                &.menu-visible {
                    border-color: var(--color-ct-nav-main-active);
                }

                a {
                    background: var(--color-ct-nav-sub) !important;
                    font-weight: 600;

                    &:before {
                        bottom: 0 !important;
                        left: 0 !important;
                        right: 0 !important;
                        top: auto !important;
                        height: 3px !important;
                        width: auto !important;
                        z-index: 3;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        border: 1px solid var(--color-ct-nav-border);
                        border-width: 0 1px;
                        pointer-events: none;
                        opacity: 0.5;
                        z-index: 4;
                    }
                }

                &:first-child a:after {
                    border-left: none;
                }
            }

        }

        .fa,
        .pficon-container-node,
        .list-group-item-value {
            display: inline-block;
            line-height: 1 !important;
            font-weight: 400;
        }

        .fa,
        .pficon-container-node {
            margin: 0 auto !important;
            float: none !important;
            font-size: 24px !important;
        }

        .list-group-item-value {
            font-size: 12px !important; // Set to small native mobile font size
            line-height: 2 !important; // Breathing room for ascenders/descenders
            margin: -6px auto 0; // Half font size, to offset double line-height
            padding: 0 !important; // Override Patternfly
        }
    }

    /* Restrict width of hostname nav label in mobile */
    #host-nav-item .list-group-item-value {
        max-width: ~"calc(20vw - 24px)";
    }

    .area-ct-subnav {
        display: flex !important;
        align-self: end;
        grid-area: navmenu;
        max-device-height: 100%;
        min-height: 50%;
        grid-column: 1;
        grid-row: 2;
        z-index: 2;
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translate(0,100%) scaleY(0);
        transition: opacity 200ms ease-in 100ms, transform 100ms ease-in 300ms;

        &.interact {
            transform: none;
            opacity: 1;
            overflow: visible;
            transition: bottom 300ms ease-out, box-shadow 300ms ease-out, transform 300ms ease-out;
        }

        .dropdown-menu {
            width: auto !important;
            left: @mobile-button-size / 2 !important;
            right: @mobile-button-size / -2 !important;
            animation: navFadeInSlideDown 600ms;
        }
    }

    .host-apps {
        flex: auto;
        max-device-height: 100%;
    }

    .navbar-collapse > ul,
    .area-ct-subnav {
        box-shadow: 0 0 9px ~"rgba(0, 0, 0, 0.4)" !important;
    }

    /* Add an indicator for the host menu in mobile nav */
    .has-menu {
        .pficon-container-node {
            position: relative;

            &:after {
                font-family: FontAwesome;
                content: "\f0d7";
                position: absolute;
                font-size: 1rem;
                position: absolute;
                bottom: 0.25em;
                right: -1em;
                color: var(--color-ct-nav-main-active-text);
                opacity: 0.5;
                transition: all 300ms;
            }
        }

        &.menu-visible .pficon-container-node {
            &:after {
                transform: scale(1, -1);
                bottom: 0.125em;
                opacity: 0.75;
            }
        }

        &:not(.active) .pficon-container-node:after {
            opacity: 0;
        }
    }
}


@media (max-device-width: 1024px) and (max-device-height: 768px) and (orientation: landscape) {
  /* Shrink nav for VMs @ 1024×768 (and below)  */

  .area-ct-subnav {
    flex: 0 1 12em;
  }

  .nav-sidebar-wrap.expanded .nav-sidebar .list-group-item > a {
    min-height: 0;
    padding: 0.25rem 0.5rem;
  }
}


/* Apply Cockpit colors to main nav */
.main-navbar .list-group-item {
    border-color: var(--color-ct-nav-main-border);

    > a {
        color: var(--color-ct-nav-main-text);
        background: var(--color-ct-nav-main);
        background-image: linear-gradient(to left, var(--color-ct-nav-main-border) 1px, var(--color-ct-nav-main) 1px);

        > span {
            font-weight: 400;
        }
    }

    &:focus > a,
    &:hover > a {
        background: var(--color-ct-nav-main-hover);
        color: var(--color-ct-nav-main-hover-text);
    };

    &.active > a {
        background: var(--color-ct-nav-main-active);
        color: var(--color-ct-nav-main-active-text);
    }

    &.active:hover {
        // Override PF3
        border-color: var(--color-ct-nav-main-border);
    }
}

/* Navigation animation */

@keyframes navFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes navFadeInSlideDown {
    from { opacity: 0; max-device-height: 0; }
    to { opacity: 1; max-device-height: auto; }
}
