Crosshair {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;

    .centerDot {
        background-color: white;
        top: 0px;
        left: 0px;
        width: 2px;
        height: 2px;
        box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.4);
        transition: all 0.1s ease-out 0s;
    }

    .leftBar {
        left: -16px;
        width: 12px;
        height: 1px;
    }

    .rightBar {
        left: 5px;
        width: 12px;
        height: 1px;
    }

    .topBar {
        top: -16px;
        width: 1px;
        height: 12px;
    }

    .bottomBar {
        top: 5px;
        width: 1px;
        height: 12px;
    }

    .sharedBarStyling {
        position: absolute;
        background-color: white;
        box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.4);
        transition: all 0.1s ease-out 0s;
    }

    &.hideCrosshair {
        display: none;
    }
}