@import "/UI/Core/Styles/Theme.scss";

PauseMenuRoot {

    &.confirm-open {
        >.navigator-canvas {
            opacity: 0;
            pointer-events: none;
        }
    }

    .pause-topbar {
        width: 100%;
        padding: 12px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
        pointer-events: all;
    }

    .pause-actions {
        width: 100%;
        max-width: 1000px;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 16px;
        @include menu-surface-glass( $padding: 8px );


        opacity: 1;
        transition: opacity $motion-menu-fade, transform $motion-menu-shift;

        &:intro {
            opacity: 0;
            transform: translateY( $motion-menu-intro-offset-y );
        }

        &:outro {
            opacity: 0;
            transform: translateY( $motion-menu-outro-offset-y );
            pointer-events: none;
        }
    }

    .pause-action {
        width: 180px;
        min-width: 180px;
        justify-content: center;
    }

    UIButton .ui-button.variant-main-menu.pause-action {
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: background-color $motion-fast, border-color $motion-fast;
    }

    UIButton .ui-button.variant-main-menu.pause-action.action-mod:hover:not(.disabled),
    UIButton .ui-button.variant-main-menu.pause-action.action-settings:hover:not(.disabled) {
        background-color: rgba($grey, 0.1);
    }

    UIButton .ui-button.variant-main-menu.pause-action.action-disconnect:hover:not(.disabled),
    UIButton .ui-button.variant-main-menu.pause-action.action-quit:hover:not(.disabled) {
        background-color: rgba($traitor-red, 0.1);
    }

    UIButton .ui-button.variant-main-menu.pause-action.action-mod.active,
    UIButton .ui-button.variant-main-menu.pause-action.action-settings.active,
    UIButton .ui-button.variant-main-menu.pause-action.action-server-info.active {
        background-color: rgba($traitor-red, 0.28);
        border-color: rgba($traitor-red, 0.7);
    }

    .pause-confirm-overlay {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        justify-content: center;
        z-index: 100;
    }

    .pause-confirm-overlay.is-closed {
        pointer-events: none;
        background-color: transparent;
        opacity: 0;
    }

    .pause-confirm-overlay.is-open {
        pointer-events: all;
        background-color: rgba(0, 0, 0, 0.55);
        opacity: 1;
    }

    .pause-confirm-card {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 28px 36px;
        min-width: 420px;
        max-width: 560px;

        .pause-title {
            font-family: "Poppins";
            font-size: 18px;
            font-weight: 900;
            letter-spacing: 2.4px;
            text-transform: uppercase;
            color: rgba( 255, 255, 255, 0.96 );
            text-align: center;
            text-shadow: 0px 1px 3px rgba( 0, 0, 0, 0.85 );
        }

        .pause-subtitle {
            font-family: "Poppins";
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.5px;
            color: rgba( 255, 255, 255, 0.78 );
            text-align: center;
            text-shadow: 0px 1px 2px rgba( 0, 0, 0, 0.8 );
        }
    }

    .pause-confirm-actions {
        flex-direction: row;
        gap: 12px;
        margin-top: 8px;
    }

    .pause-confirm-action {
        min-width: 130px;
        justify-content: center;
    }

    UIButton .ui-button.variant-main-menu.pause-confirm-action {
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: background-color $motion-fast, border-color $motion-fast;
    }

    UIButton .ui-button.variant-main-menu.pause-confirm-action.action-cancel:hover:not(.disabled) {
        background-color: rgba($grey, 0.1);
    }

    UIButton .ui-button.variant-main-menu.pause-confirm-action.action-confirm {
        background-color: rgba($traitor-red, 0.2);
        border-color: rgba($traitor-red, 0.55);
    }

    UIButton .ui-button.variant-main-menu.pause-confirm-action.action-confirm:hover:not(.disabled) {
        background-color: rgba($traitor-red, 0.4);
        border-color: rgba($traitor-red, 0.85);
    }

    >.navigator-canvas {
        position: relative;
        height: auto;
        min-height: 0;
    }

    >.navigator-canvas>.navigator-body>SettingsPage,
    >.navigator-canvas>.navigator-body SettingsPage {
        width: 100%;
        max-width: 1920px;
        min-height: 0;
        flex-grow: 1;
        //margin-right: auto;
    }

}