/**
 *
 * Reldens - Styles - Joystick
 *
 */

@use "variables" as *;

#joystick {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: $cGrey;
    position: relative;
    margin: 0;
    opacity: 0.8;
}

.ui-box.ui-box-controls.ui-box-joystick {
    @media (max-width: 725px) {
        bottom: 38px;
        left: 130px;
    }
}

.game-container {
    .joystick-small-resolutions-only {
        #joystick {
            display: none;
        }

        @media (max-width: 725px) {
            #joystick {
                display: block;
            }

            .arrows-container {
                display: none;
            }
        }
    }
}

#joystick-thumb {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: $cWhite;
    position: absolute;
    top: 25px;
    left: 25px;
    cursor: pointer;
    transition: background-color 0.2s;
}