/* -------------------------------------------------------------------------------------------

Provide a checkable element for syncing javascript breakpoint with CSS media query breakpoints 

*/

#width-check {
    /* keep it invisible */
    display: none;
    width: 0;

    /* use the float property to identify mobile vs. desktop width */
    float: none;

    /* use a different value for the left property for each media query range */
    left: 0;

    /* Adding absolution positioning to help address issues with iOS mobile rendering left:auto */
    position: absolute;
}

@media screen and (max-width: $screen-xs-max) {
    #width-check {
        left: 0;
        position: absolute;
    }
}

@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    #width-check {
        left: 1px;
        position: absolute;
    }
}

@media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    #width-check {
        float: left; /* because we're wider than the mobile/desktop breakpoint */
        left: 2px;
        position: absolute;
    }
}

@media screen and (min-width: $screen-lg-min) {
    #width-check {
        float: left; /* because we're wider than the mobile/desktop breakpoint */
        left: 3px;
        position: absolute;
    }
}