/*
Checkbox

Checkbox styles from trimble css

Markup:
<div class="checkbox">
  <input class="check-input" type="checkbox" id="timezones" /><label for="timezones">Display All Timezones</label>
</div>

Styleguide Form Elements.checkbox
*/
@import 'colors.scss';
@import 'variables.scss';

input[type="checkbox"] + label[for], input[type="radio"] + label[for]{
    cursor:pointer;
}


@mixin checkbox-image($background-url){
    &:before{
        content:" ";
        position:absolute;
        left:0;
        top:0;
        width:25px;
        height:25px;
        background: $background-url;
        display: inline-block;
    }
}

.check-input{
    box-sizing:border-box;
    opacity:0;
    position:relative;
    z-index: 0;
    width:1rem;
    height:1rem;
    margin:0 2px;
}

.checkbox{
    position: relative;
}

.check-input + label{
    display: inline-block;
    vertical-align: baseline;
    margin-left:1rem;
    margin-right:1rem;
    margin-bottom: 0;
    @include checkbox-image(url("../images/checkbox-unchecked.svg") no-repeat);
    &:hover{
        &:before{
          background: url("../images/checkbox-unchecked-hover.svg") no-repeat;
        }
    }
}

.check-input:checked + label {
    display: inline-block;
    padding: 0;
        cursor: pointer;
        @include checkbox-image(url("../images/checkbox-checked.svg") no-repeat);
        &:hover{
            &:before{
            background: url("../images/checkbox-checked-hover.svg") no-repeat;
        }
    }
}

.check-input:indeterminate + label {
    display: inline-block;
    padding: 0;
     cursor: pointer;
    @include checkbox-image(url("../images/checkbox-indeterminate.svg") no-repeat);
    &:hover{
      &:before{
        background: url("../images/checkbox-indeterminate-hover.svg") no-repeat;
        background-size:25px 25px;
        background-position:center;
      }
    }
}


@media only screen and (max-width:480px){
    .checkbox{
       @include flex-row-center;
        min-height: 1.5rem;
    }
}