@use './global/globalCssVariables.module' as global;

.antimodeMenu-cont {
    position: absolute;
    z-index: 10001;
    height: global.$antimodemenu-height;
    width: fit-content;
    border-radius: global.$standard-border-radius;
    // box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
    // border-radius: 0px 6px 6px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;

    &.expanded {
        // Conditionally unset the height when the class is applied
        height: auto;
    }

    &.with-rows {
        flex-direction: column;
    }

    .antimodeMenu-row {
        display: flex;
        height: 35px;
    }

    .antimodeMenu-dragger {
        height: 100%;
        transition: width 0.2s;
        background-image: url('https://logodix.com/logo/1020374.png');
        background-size: 90% 100%;
        background-repeat: no-repeat;
        background-position: left center;
    }
}

@media only screen and (max-device-width: 480px) {
    .antimodeMenu-cont {
        height: 100px;
        width: 100vw;

        &.with-rows {
            flex-direction: column-reverse;
        }

        .antimodeMenu-row {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .antimodeMenu-button {
            background-color: transparent;
            width: 100px;
            height: 100px;

            &.active {
                background-color: #121212;
            }
        }

        .antimodeMenu-button:hover {
            background-color: #121212;
        }
    }
}