@import "variables";

$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: $sidebar-width-sm;

            .nav-sidebar {
                width: $sidebar-width-sm;
            }

            .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: $sidebar-width-full;
        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-areas:
            "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; }
}
