@import '/UI/Style.scss';

Menu {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url(ui/pause/background.png);
    background-size: contain;
    background-image-tint: rgba(black, 0.9);
    background-repeat: no-repeat;
    font-family: $font-main;
    transition: opacity 0.25s ease-in-out;
    justify-content: space-between;

    &:intro {
        opacity: 0;
    }

    >.content {
        position: relative;
        width: 600px;
        height: 100%;
        transition: transform 0.5s ease-in-out;

        &:intro {
            transform: translateX(-100%);
        }

        >.logo {
            position: absolute;
            width: 100%;
            height: 450px;
            align-items: center;
            flex-direction: column;
            padding: 20px;

            >img {
                width: 500px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                animation: Rotate 1.5s linear alternate infinite;
            }

            >.text {
                flex-shrink: 0;
                justify-content: center;
                align-items: center;
                padding: 5px 20px;
                width: 400px;
                font-size: 32px;
                background-color: #ea361f;
                color: $white;
            }
        }

        >.buttons {
            position: absolute;
            bottom: 0px;
            height: 650px;
            width: 100%;
            background-image: url(ui/pause/background_things.png);
            background-size: contain;
            background-repeat: no-repeat;
            flex-direction: column;
            gap: 20px;
            padding-right: 50px;
            padding-top: 80px;

            >.spacer {
                margin-top: 10px;
                margin-bottom: 10px;
            }

            >.row {
                position: relative;
                align-items: center;

                >.line {
                    position: absolute;
                    background-color: $gray-darker;
                    box-shadow: 0px 0px 2px $gray-darker;
                }

                >Button {
                    width: 100%;
                    height: 50px;
                    margin-left: 110px;
                }

                &.multiple {
                    flex-direction: row;
                    padding-top: 20px;
                    gap: 10px;
                    margin-left: 110px;
                    width: 100%;
                    justify-content: center;

                    >Button {
                        width: 32%;
                        margin-left: 0px;
                        font-size: 20px;
                    }
                }
            }
        }
    }

    >.tab {
        height: 100%;
        width: 60%;
        justify-content: center;
        align-items: center;
        padding-right: 40px;

        >.content {
            background-color: $gray-darker;
            width: 100%;
            height: 700px;
            flex-direction: column;
            padding-top: 20px;

            >.top-bar {
                width: 100%;
                justify-content: space-between;
                flex-shrink: 0;
                align-items: center;
                padding: 5px 50px;

                >.title {
                    font-size: 56px;
                    color: $white;
                }
            }
        }
    }

    &.ingame {
        background-color: rgba(black, 0.8);
    }

    &.mainmenu {}
}

@keyframes Rotate {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(2px);
    }
}