@import (less) "../lib/page.css";
@import "../lib/cards.less";
@import (less) "../lib/table.css";

@import (less) "../../node_modules/c3/c3.css";

// For patternfly-react and @patternfly/react-console
@import "~xterm/lib/xterm.css";
@import "~bootstrap/less/variables";
@import "~patternfly/dist/less/variables";
@import "~@patternfly/react-console/dist/less/console.less";

.icon-2x-vms {
    font-size: 2em;
}
.icon-3x-vms {
    font-size: 3em;
}

.machines-width-max {
    width: 100%;
}

.usage-donut-caption {
    text-align: center;
    width: 200px;
}

.machines-disks .listing-ct th:nth-last-child(-n+2),
.machines-disks .listing-ct td:nth-last-child(-n+2) :not(.machines-listing-actions) {
    text-align: left;
}

.machines-disks-source {
    /* Counter-act parent td padding for the table */
    margin: -5px 0;

    th, td {
        padding: 0;
        vertical-align: baseline;
    }

    th + td,
    td + td {
        padding-left: 0.5em;
    }
}

.machines-listing-detail-top-column {
    vertical-align: top;
}

.machines-console-frame {
    height: 1px; /* keep at minimum, down-sizing does not work */
    margin-top: 1em;
}

.machines-console-frame-vnc {
    width: 100%;
    height: 100%;
    margin-top: -2em;
}

.left-delimiter {
    padding: 0 13px 0;
}

.left-delimiter + .left-delimiter {
    border-left: 1px solid #d1d1d1;
    padding-left: 15px;
}

.top-right-menu {
    float: right;
    padding-bottom: 5px;
    position: absolute;
    right: 5em;
}

.blue {
    color: var(--color-link);
}

.machines-desktop-main {
    width: 100%;
}

.machines-desktop-main-col {
    width: 50%;
    text-align: center;
    vertical-align: top;
}

.machines-desktop-manual-block {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.machines-desktop-viewer-block {
    margin-top: 3em;
    margin-bottom: 2.5em;
}

.machines-desktop-manual-con-details {
    display: inline-block;
    text-align: left;
}

.machines-desktop-shell-command {
    color: var(--color-subtle-copy);
}

.machines-desktop-more-info-container {
    display: inline-block;
    max-width: 40em;
}

.machines-desktop-more-info-text {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.machines-desktop-install-instructs {
    display: inline-block;
    padding: 0;
    margin: 0 2em 10px;
}

.machines-desktop-install-instructs-item {
    text-align: left;
}

.machines-desktop-install-instructs-row {
    display: inline-flex;
}

.machines-network-source-descr {
    color: var(--color-subtle-copy);
    text-align: right;
    padding: 5px 10px 5px 10px !important;
}

.machines-network-source-value {
    padding: 5px 10px 5px 10px !important;
    text-align: left !important;
}

.machines-network-up {
    color: green;
}

.machines-network-down {
    color: red;
}

.machines-network-source-link {
    cursor: pointer;
    text-decoration: underline;
    color: var(--alert-info-text);
}

.machines-listing-actions {
    display: inline-flex;
    justify-content: space-between;
}

.machines-listing-actions > .btn:not(:last-child) {
    margin-right: 0.5rem;
}

.machines-network-list {
    max-height: 500px;
    overflow: auto;
    padding-bottom: 15px;
}

.panel-heading .btn {
    margin-left: 3px;
}

.console-menu {
    padding-bottom: 1em;
}

.console-actions-buttons {
    margin-left: 5px;
}

.console-actions {
    float: right;
    position: relative;
    top: -2em;
}

.machines-status-alert {
    padding-right: 5px;
}

#create-vm-dialog .spinner {
    display: inline-block;
}

.modal-body + .modal-footer {
    /* Remove unneeded margin when there's a modal body and footer */
    margin-top: 0;
}

/* Machines Modal footer custom CSS */
.modal-footer .idle-message {
    align-items: center;
    display: flex;
    float: left;
    line-height: 24px; /* Same height as a button */
}

#vcpus-tooltip.pficon-pending, #boot-order-tooltip.pficon-pending {
    margin-left: 0.5rem;
}

.pficon-pending {
    color: #ec7a08;
    font-size: 16px;
}

.modal-footer .pficon-pending {
    line-height: inherit;
    margin-right: 0.5rem;
}

.machines-listing-breadcrumb {
    padding-left: 20px !important;
}

td > .utilization-bar-pf {
    width: 100%;
    min-width: 4em;

    > .progress {
        margin-bottom: 0;
        height: 0.5rem;
    }
}

.error.listing-ct-item {
    background-color: var(--color-ct-list-critical-bg) !important;  /* keep red background when expanded */
}

// Toast-related variables
@toast-stack-offset: 0.75rem;
@toast-anim-speed: 200ms;

// Notification wrapper styles that apply to both mobile and desktop
.toast-notification-wrapper {
    position: relative;
    display: inline;
    // WebKit (Safari, GNOME Web) somehow _still_ needs a prefix for stickiness
    position: -webkit-sticky;
    position: sticky;
    // Dialogs are z-index 1050 in PatternFly, inheriting from Bootstrap.
    // As we want notifications to be the topmost element except for dialogs,
    // we'll make it 1050 - 1 for the toasts.
    z-index: 1049;

    // Limit toast details to 33% of the viewport height
    .toast-pf p {
        max-height: 33vh;
        overflow: auto;
    }
}

// Notification stack (static & reversed, so new is on bottom) for mobile
@media screen and (max-width: 640px) {
    .toast-notification-wrapper {
        right: 0.5rem;
        bottom: 0;
        left: 0.5rem;
        position: fixed;
    }

    .toast-notifications-list-pf {
        display: flex;
        flex-direction: column-reverse;
        margin: auto;
        max-height: calc(100vh - 1rem);
        overflow: auto;
        position: static;

        .toast-pf {
            animation: toast-fade-in @toast-anim-speed ease-out;
            transform-origin: bottom;
        }
    }
}

// Notification stacking for desktop browsers
@media screen and (min-width: 641px) {
    .toast-notification-wrapper {
        // Toast grid can escape a 0 height flex without reflowing
        display: flex;
        height: 0;
        top: 0.5rem - @toast-stack-offset;
    }

    .toast-pf {
        // Animation for toasts fading & sliding in
        animation: toast-fade-in @toast-anim-speed ease-out;
        // Animations should happen from the top
        transform-origin: top;
        // Animation setup for the stack collapse & expanding
        transition: all @toast-anim-speed ease-out;
        // Delay the stacking until the fade-in animation is done
        transition-delay: @toast-anim-speed;
        margin: 0;
        max-width: calc(100vw - 4rem);
        width: 72ch;
        z-index: 2;

        // Animate CSS changes for the icon and other toast children
        .pficon::before, a, p {
            transition: all @toast-anim-speed ease-out;
        }
    }

    .toast-notifications-list-pf {
        display: grid;
        grid-gap: 0.5rem;
        margin: @toast-stack-offset auto 0;
        max-width: 100% !important;
        position: static;

        // When hovering, expand the mouse area
        // better for jittery mice and people with tremor
        // and important for preserving the hover when dismissing
        // the bottom-most notification
        &:hover {
            border: 1px solid transparent;
            // Notifications are approximately 36px (== 3.6rem) tall; round up
            border-width: 0 4rem 5rem;

            .toast-pf {
                // Speed up hover animations on hover
                transition-delay: 0;
            }
        }

        // Collapsed list with progressive enhancement:
        // Require :focus-within support for hover collapsing to work,
        // so keyboard navigation always works with *all* browsers.
        // We're using :not() here as we want the default to be expanded
        // and for the notifications to collapse when not being hovered
        // or have focus inside (either expanding from tabbing to the elements
        // or persisting expansion after clicking a details link).
        &:not(:hover):not(:focus-within) {
            .toast-pf {
                // Collapse down everything but the last
                &:not(:last-child) {
                    // Complately fade text
                    color: transparent;
                    // Stack the cards
                    margin-bottom: -4.5rem;
                    // Fade the cards
                    opacity: 0.25;

                    > .pficon::before {
                        // Fade the icon
                        color: transparent;
                        // Delay fading until toast appears and slides up
                        transition-delay: @toast-anim-speed * 2;
                    }
                }

                // All notifications, except when there's just one:
                // Hide text when collapsed
                &:not(:only-child) {
                    a, p {
                        opacity: 0;
                    }

                    p {
                        line-height: 0;
                        max-height: 0;
                        overflow: hidden;
                    }
                }
            }
        }
    }
}

@keyframes toast-fade-in {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scaleY(1);
    }
}
