@import "./global/globalCssVariables";


.antimodeMenu-cont {
    position: absolute;
    z-index: 10001;
    height: $antimodemenu-height;
    background: $dark-gray;
    border-bottom: $standard-border;
    // box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
    // border-radius: 0px 6px 6px 6px;
    display: flex;

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

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

    .antimodeMenu-button {
        background-color: transparent;
        width: 35px;
        height: 35px;
        padding: 5;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .svg {
            margin: 0;
        }

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

    .antimodeMenu-button:hover {
        background-color: rgba(0, 0, 0, 0.4);
    }

    .antimodeMenu-dragger {
        height: 100%;
        transition: width .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;
        }
    }
}