EscMenu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(black, 0.7);
    font-family: "Cal Sans";
    color: white;
    font-size: 32px;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
    padding: 64px;
    gap: 16px;

    .blank {
        flex-grow: 1;
    }

    .title {
        font-family: Poppins;
        font-weight: 700;
        font-size: 100px;
        text-shadow: 8px 8px 0px black;
    }

    .timer {
        position: relative;
        color: #ff7777;
        font-size: 42px;
        font-weight: bold;
        padding: 4px 10px;
        //text-shadow: 3px 3px 0px black;
        text-stroke: 8px #222;
        white-space: pre;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #0002;
        backdrop-filter: blur( 1px );
    }

    .difficulty {
        position: absolute;
        top: 5%;
        color: #ff7777;
        font-size: 42px;
        font-weight: bold;
        text-stroke: 8px #222;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #0002;
        backdrop-filter: blur( 1px );
        padding: 8px;
    }

    .equipment {
        position: relative;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        padding: 8px 0;

        .equip_item {
            position: relative;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            background-color: rgba(0, 0, 0, 0.35);
            border-radius: 6px;
            padding: 6px 10px;

            .equip_icon {
                position: relative;
                width: 36px;
                height: 36px;
                flex-shrink: 0;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
            }

            .equip_info {
                position: relative;
                flex-direction: column;
                gap: 1px;

                .equip_name {
                    font-size: 16px;
                    color: white;
                    font-weight: bold;

                    .equip_level {
                        font-size: 13px;
                        color: rgba(255, 255, 255, 0.55);
                    }
                }

                .equip_desc {
                    font-size: 14px;
                    color: rgba(255, 255, 255, 0.75);
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 2px;

                    i {
                        top: 0;
                    }
                }
            }
        }
    }

    > .content {
        position: relative;
        width: 500px;
        gap: 42px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        //border: 1px solid blue;

        .row {
            flex-direction: row;
            gap: 16px;
            //width: 100%;
        }

        .col {
            flex-direction: column;
            gap: 16px;
            //width: 100%;
        }
    }

    > .are-you-sure {
        position: absolute;
        z-index: 10000;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        background-color: rgba(black, 0.7);
        backdrop-filter: blur( 4px );
        opacity: 1;
        transition: opacity 0.15s ease;

        > .panel {
            position: relative;
            left: 0px;
            width: 800px;
            height: 200px;
            background-color: rgba(#8888ff, 0.04);
            padding: 16px;
            gap: 16px;
            flex-direction: column;
            transition: all 0.2s ease;
            background-position: center;
            background-size: 100% 100%;
            background-image: url("/textures/ui/panel/confirm_panel.png");

            > .title {
                font-size: 32px;
                text-shadow: 0 0 0 transparent;
                margin-left: 12px;
                margin-top: 4px;
            }

            > .row {
                width: 100%;
                justify-content: space-evenly;
                gap: 16px;
            }

            &:intro {
                left: -64px;
            }
        }

        &:intro {
            opacity: 0;
        }

        &:outro {
            opacity: 0;
        }
    }

    button {
        position: relative;
        //width: 220px;
        //height: 72px;
        width: 244px;
        height: 99px;
        //background-color: #4CAF50;
        //color: white;
        //padding: 15px 32px;
        //text-align: center;
        //font-size: 32px;
        cursor: pointer;
        //box-shadow: 6px 6px 0px black;
        pointer-events: all;
        background-position: center;
        background-size: 100% 100%;
        //border: 1px solid red;
        //&:hover {
        //    background-color: #45a049;
        //    sound-in: ui.button.over;
        //}
        //&:active {
        //    background-color: #3e8e41;
        //    sound-in: ui.button.press;
        //}

        &.fill {
            width: 100%;
        }

        InputHint.inputbutton {
            position: absolute;
            right: -8px;
            top: -8px;
            pointer-events: none;
            font-size: 15px;
            width: 40px;
            padding: 8px;
            opacity: 1.5;

            img {
                background-image-tint: rgba(230, 255, 240, 0.8);
            }
        }
        //&.red {
        //    background-color: #f44336;
        //    &:hover {
        //        background-color: #d32f2f;
        //    }
        //    &:active {
        //        background-color: #c62828;
        //    }
        //}
        //&.blue {
        //    background-color: #6366f4;
        //    &:hover {
        //        background-color: #4f4fd3;
        //    }
        //    &:active {
        //        background-color: #3838c6;
        //    }
        //}
    }

    .resume_button {
        background-image: url("/textures/ui/panel/esc_button_resume.png");

        &.controller {
            //width: 244px;
            //height: 99px;
            //z-index: 1;
            background-image: url("/textures/ui/panel/esc_button_resume_controller.png");
        }

        &:hover {
            background-image: url("/textures/ui/panel/esc_button_resume_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            background-image: url("/textures/ui/panel/esc_button_resume_active.png");
            sound-in: ui.button.press;
        }

        &.controller.ctrl-held {
            background-image: url("/textures/ui/panel/esc_button_resume_controller_hover.png");
        }

        &.controller.ctrl-activated {
            background-image: url("/textures/ui/panel/esc_button_resume_controller_active.png");
        }
    }

    .restart_button {
        background-image: url("/textures/ui/panel/esc_button_restart.png");

        &.controller {
            background-image: url("/textures/ui/panel/esc_button_restart_controller.png");
        }

        &:hover {
            background-image: url("/textures/ui/panel/esc_button_restart_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            background-image: url("/textures/ui/panel/esc_button_restart_active.png");
            sound-in: ui.button.press;
        }

        &.controller.ctrl-held {
            background-image: url("/textures/ui/panel/esc_button_restart_controller_hover.png");
        }

        &.controller.ctrl-activated {
            background-image: url("/textures/ui/panel/esc_button_restart_controller_active.png");
        }
    }

    .restart_button_client {
        background-image: url("/textures/ui/panel/esc_button_restart_client.png");
        pointer-events: none;
        opacity: 0.5;
    }

    .options_button {
        background-image: url("/textures/ui/panel/esc_button_options.png");

        &.controller {
            background-image: url("/textures/ui/panel/esc_button_options_controller.png");
        }

        &:hover {
            background-image: url("/textures/ui/panel/esc_button_options_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            background-image: url("/textures/ui/panel/esc_button_options_active.png");
            sound-in: ui.button.press;
        }

        &.controller.ctrl-held {
            background-image: url("/textures/ui/panel/esc_button_options_controller_hover.png");
        }

        &.controller.ctrl-activated {
            background-image: url("/textures/ui/panel/esc_button_options_controller_active.png");
        }
    }

    .quit_to_lobby_button {
        background-image: url("/textures/ui/panel/esc_button_quit_to_lobby.png");

        &.controller {
            background-image: url("/textures/ui/panel/esc_button_quit_to_lobby_controller.png");
        }

        &:hover {
            background-image: url("/textures/ui/panel/esc_button_quit_to_lobby_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            background-image: url("/textures/ui/panel/esc_button_quit_to_lobby_active.png");
            sound-in: ui.button.press;
        }

        &.controller.ctrl-held {
            background-image: url("/textures/ui/panel/esc_button_quit_to_lobby_controller_hover.png");
        }

        &.controller.ctrl-activated {
            background-image: url("/textures/ui/panel/esc_button_quit_to_lobby_controller_active.png");
        }
    }

    .leave_button {
        background-image: url("/textures/ui/panel/esc_button_leave.png");

        &.controller {
            background-image: url("/textures/ui/panel/esc_button_leave_controller.png");
        }

        &:hover {
            background-image: url("/textures/ui/panel/esc_button_leave_hover.png");
            sound-in: ui.button.over;
        }

        &.controller.ctrl-held {
            background-image: url("/textures/ui/panel/esc_button_leave_controller_hover.png");
        }

        &.controller.ctrl-activated {
            background-image: url("/textures/ui/panel/esc_button_leave_controller_active.png");
        }

        &:active {
            background-image: url("/textures/ui/panel/esc_button_leave_active.png");
            sound-in: ui.button.press;
        }
    }

    .pause_button {
        background-image: url("/textures/ui/panel/esc_button_pause.png");

        &:hover {
            background-image: url("/textures/ui/panel/esc_button_pause_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            background-image: url("/textures/ui/panel/esc_button_pause_active.png");
            sound-in: ui.button.press;
        }
    }

    .unpause_button {
        background-image: url("/textures/ui/panel/esc_button_unpause.png");

        &:hover {
            background-image: url("/textures/ui/panel/esc_button_unpause_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            background-image: url("/textures/ui/panel/esc_button_unpause_active.png");
            sound-in: ui.button.press;
        }
    }

    .confirm_no_button {
        background-image: url("/textures/ui/panel/button_confirm_no.png");

        &:hover {
            background-image: url("/textures/ui/panel/button_confirm_no_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            transform: translateY(4px);
            sound-in: ui.button.press;
        }

        InputHint.inputbutton {
            right: -20px;
            top: -20px;
            width: 56px;
            height: 56px;
            padding: 0px;
            opacity: 1;

            img {
                width: 100%;
                height: 100%;
                background-image-tint: rgba(255, 255, 255, 1);
            }
        }
    }

    .confirm_yes_button {
        background-image: url("/textures/ui/panel/button_confirm_yes.png");

        &:hover {
            background-image: url("/textures/ui/panel/button_confirm_yes_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            transform: translateY(4px);
            sound-in: ui.button.press;
        }

        InputHint.inputbutton {
            right: -20px;
            top: -20px;
            width: 56px;
            height: 56px;
            padding: 0px;
            opacity: 1;

            img {
                width: 100%;
                height: 100%;
                background-image-tint: rgba(255, 255, 255, 1);
            }
        }
    }
}