@import '../common.scss';

Menu {
    cursor: none;
    width: 100%;
    height: 100%;
    color: white;
    font-family: $font-primary;
    pointer-events: all;

    &.hide {
        .left {
            transform: translateX(-1080px);
        }

        .right {
            transform: translateX(1080px);
        }
    }

    .column {
        width: 50%;
        height: 100%;
        flex-direction: column;
        opacity: 1;
        transition: all 0.5s;

        &.left {
            margin-left: 110px;
        }

        &.right {
            margin-right: 110px;
            justify-content: flex-start;
            align-items: flex-end;
            font-size: 36px;
        }
    }

    .grubs-logo {
        font-size: 128px;
        text-stroke: 24px black;
        font-weight: bold;
        margin-top: 80px;
    }

    .menu-options {
        font-size: 48px;
        flex-direction: column;
        margin-top: auto;
        align-items: flex-start;
        margin-bottom: 200px;
        gap: 24px;

        > button {
            text-stroke: 4px black;
            text-shadow: 4px 4px black;

            &.disabled {
                color: grey;
            }

            &:hover:not(.disabled) {
                transform: translateX(4px);
                sound-in: ui_button_hover;
            }
        }
    }

    .discord-info {
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        margin-top: 120px;
        gap: 10px;

        .feedback-text {
            font-size: 20px;
        }

        .branding {
            align-items: center;
            gap: 10px;

            .logo-container {
                background-color: $menu-discord-blurple;
                border-radius: 15px;

                img {
                    max-width: 50px;
                    max-height: 50px;
                    margin: 10px;
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                }
            }
        }
    }
}