$blue: rgb(36, 69, 248);
$red: rgb(248, 69, 36);
$background: rgba(10, 10, 10, 0.8);
$background-light: rgba(120, 120, 120, 0.1);
$gray: rgb(140, 140, 140);

ReportMenu {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(black, 0.9);
    transition: opacity 0.2s ease-in-out;
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: Poppins;
    color: white;
    pointer-events: all;

    &:intro {
        opacity: 0;
    }

    .button {
        background-color: $blue;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 24px;
        transition: all 0.2s ease-in-out;
        pointer-events: all;

        &.disabled {
            background-color: $gray;
            pointer-events: none;
        }

        &:not(.disabled) {
            &:hover {
                transform: scale(1.04);
                background-color: lighten($blue, 0.1);
                sound-in: ui.button.over;
                cursor: pointer;
            }

            &:active {
                transform: scale(1.01);
                background-color: lighten($blue, 0.05);
                sound-in: ui.button.press;
            }
        }
    }

    > .window {
        width: 600px;
        flex-direction: column;
        filter: drop-shadow(0px 0px 5px rgba(black, 0.5));
        pointer-events: all;

        > .header {
            position: relative;
            background-color: $blue;
            justify-content: center;
            align-items: center;
            padding: 10px 0px;
            font-weight: bold;
            border-radius: 10px 10px 0px 0px;

            > .logo {
                position: absolute;
                left: 10px;
                aspect-ratio: 1;
                height: 100%;
                background-image: url(Logo.png);
                background-position: center;
                background-size: 100%;
                background-repeat: no-repeat;
            }

            > .close {
                position: absolute;
                right: 10px;
                aspect-ratio: 1;
                height: 60%;
                border-radius: 10px;
                background-color: rgba(white, 0);
            }
        }

        > .content {
            padding: 25px;
            flex-direction: column;
            gap: 20px;
            background-color: $background;
            border-radius: 0px 0px 10px 10px;

            > p {
                color: gray;
                font-size: 18px;
            }

            > .entry {
                position: relative;
                flex-direction: column;
                gap: 5px;
                width: 100%;
                transition: all 0.2s ease-in-out;

                &:hover {
                    opacity: 1.1;
                    sound-in: ui.button.over;
                }

                &:active {
                    opacity: 1.05;
                    sound-in: ui.button.press;
                }

                > p {
                    font-weight: bold;
                    color: white;
                }

                TextEntry {
                    align-items: center;
                    height: 40px;
                    width: 100%;
                    background-color: $background-light;
                    font-size: 20px;
                    overflow: scroll;

                    &.tall {
                        align-items: flex-start;
                        height: 200px;
                    }
                }

                .left {
                    position: absolute;
                    right: 12px;
                    bottom: 8px;
                    font-weight: bold;
                    font-size: 16px;
                    opacity: 0.5;
                }
            }

            > .submit {
                width: 100%;
                height: 40px;
                justify-content: center;
                align-items: center;

                > .button {
                    width: 500px;
                    height: 100%;
                }
            }
        }
    }
}