/*
Checkboxes

Styles used for checkboxes

Markup:
<h3>Default</h3>
<label for="the-checkbox1">
    <input type="checkbox" id="the-checkbox1" name="the-checkbox1" class="form-element__checkbox">
    <span class="form-element__checkbox-label">Automatically end the lease</span>
</label>
<h3>Disabled</h3>
<label for="the-checkbox2">
    <input type="checkbox" id="the-checkbox2" name="the-checkbox2" class="form-element__checkbox" disabled="disabled">
    <span class="form-element__checkbox-label">Automatically end the lease</span>
</label>
<h3>Has validation error</h3>
<label for="the-checkbox3">
    <input type="checkbox" id="the-checkbox3" name="the-checkbox3" class="form-element__checkbox form-element--has-error">
    <span class="form-element__checkbox-label">Automatically end the lease</span>
</label>
<h3>Without a label (i.e. in a grid)</h3>
<label for="the-checkbox4">
    <input type="checkbox" id="the-checkbox4" name="the-checkbox4" class="form-element__checkbox">
    <span class="form-element__checkbox-label form-element__checkbox-label--no-right-margin"></span>
</label>
<h3>Legacy checkboxes (i.e. cc1:CheckBoxControl>)</h3>
<span class="form-element__legacy-checkbox">
    <input type="checkbox" id="the-checkbox5" name="the-checkbox5">
    <label for="the-checkbox5">Automatically end the lease</label>
</span>
<h3>Read only</h3>
<label for="the-checkbox2">
    <input type="checkbox" id="the-checkbox2" name="the-checkbox2" class="form-element__checkbox" disabled="disabled">
    <span class="form-element__checkbox-label form-element__checkbox-label--read-only">Automatically end the lease</span>
</label>
<h3>Checkbox on Login page</h3>
<div style="padding: 15px;width: 170px;background: rgba(57, 64, 79, 0.98);">
<span class="form-element__legacy-checkbox form-element__legacy-checkbox--login">
    <input type="checkbox" id="the-checkbox6" name="the-checkbox5">
    <label for="the-checkbox6">Remember my email</label>
</span>
</div>

Name: checkbox

Styleguide 3.7
*/
@color-checkbox-border-default: @theme-grey12;
@color-checkbox-border-hover: @theme-green1;
@color-checkbox-border-disabled: @theme-grey10;
@color-checkbox-bg-checked: @theme-green1;
@color-checkbox-border-checked: @theme-green4;
@color-checkbox-error: @theme-red6;
@color-checkbox-login: @theme-grey5;
@color-checkbox-login-bg-checked: @theme-blue3;
@color-checkbox-login-border-hover: @theme-blue4;

.form-element__checkbox {
    position: absolute; //offscreen
    left: -999em;
}

.form-element__checkbox-label {
    line-height: 38px;

    &:hover {
        cursor: pointer;
    }

    &:before {
        display: inline-block;
        content: "";
        height: 20px;
        width: 20px;
        margin-right: 10px;
        margin-bottom: -6px;
        cursor: pointer;
        background-color: #FFFFFF;
        border: 1px solid @color-checkbox-border-default;
        border-radius: @border-radius-checkbox;
    }
}

.form-element__checkbox-label--normal-line-height {
    line-height: normal;
}

.form-element__checkbox-label--line-height-20 {
    line-height: 20px;
}

.form-element__checkbox-label--line-height-30 {
    line-height: 30px;
}

.form-element__checkbox-label--no-right-margin:before {
    margin-right: 0px;
}

.form-element__checkbox-label--multi-select {
    line-height: 30px;
}

.form-element__checkbox-label--in-grid-header {
    display: inline-block !important;
    padding: 0 !important;
    line-height: normal;
}

// Hover state for unselected checkbox
.form-element__checkbox + .form-element__checkbox-label:hover:before {
    border-color: @color-checkbox-border-hover;
}

.checkbox-disabled-state {
    cursor: not-allowed;
    opacity: @opacity-disabled;

    &:before {
        cursor: not-allowed;
        border-color: @color-checkbox-border-disabled;
    }
}

// Disabled state
.form-element__checkbox[disabled] + .form-element__checkbox-label {
    .checkbox-disabled-state;
}

// Hover disabled state
.form-element__checkbox[disabled] + .form-element__checkbox-label:hover:before {
    border-color: @color-checkbox-border-disabled;
}

.checkbox-selected-state {
    background-color: @color-checkbox-bg-checked;
    border-color: @color-checkbox-border-checked;
    .svgicon--checkmark-white;
    background-position: center;
    background-size: 12px;
}

// Selected state
.form-element__checkbox:checked + .form-element__checkbox-label:before{
    .checkbox-selected-state;
}

// Selected disabled state
.form-element__checkbox:checked:disabled + .form-element__checkbox-label:before {
    border-color: @color-checkbox-border-disabled;
}

// Selected state
.form-element__checkbox--indeterminate + .form-element__checkbox-label:before,
.form-element__checkbox--indeterminate:checked + .form-element__checkbox-label:before{
    .svgicon--subtract-white;
    background-color: @color-checkbox-bg-checked;
    border-color: @color-checkbox-border-checked;
    background-position: center;
    background-size: 12px;
}

// Error state
.form-element__checkbox.form-element--has-error + .form-element__checkbox-label {
    color: @color-checkbox-error;
    &:before {
        border-color: @color-checkbox-error;
    }
}

//Legacy checkboxes
.form-element__legacy-checkbox {
    input[type="checkbox"] {
        .form-element__checkbox;
    }

    label {
        .form-element__checkbox-label;
    }

    // Hover state for unselected checkbox
    input[type="checkbox"] + label:hover:before {
        border-color: @color-checkbox-border-hover;
    }

    // Disabled state
    input[type="checkbox"][disabled] + label {
        .checkbox-disabled-state;
    }

    // Hover disabled state
    input[type="checkbox"][disabled] + label:hover:before {
        border-color: @color-checkbox-border-disabled;
    }

    // Selected state
    input[type="checkbox"]:checked + label:before {
        .checkbox-selected-state;
    }
}

.form-element__legacy-checkbox--inline-block-label {
    > label { //Override legacy .input-step's display block
        display: inline-block !important;
    }
}

.form-element__legacy-checkbox--normal-line-height {
    label {
        line-height: normal;
    }
}

.form-element__legacy-checkbox--no-right-margin {
    label:before {
        margin-right: 0px;
    }
}

.form-element__legacy-checkbox--login {
    label {
        line-height: normal;
        color: @color-checkbox-login;

        &:before {
            border: 1px solid rgba(255,255,255,0.35);
            background-color: transparent;
        }
    }

    // Hover state
    input[type="checkbox"] + label:hover:before {
        border-color: @color-checkbox-login-border-hover;
    }

    // Selected state
    input[type="checkbox"]:checked + label:before {
        border-color: @color-checkbox-login-border-hover;
        background-color: @color-checkbox-login-bg-checked;
    }
}

// read-only states
.form-element__checkbox-label--read-only,
.form-element__checkbox[disabled] + .form-element__checkbox-label--read-only,
.form-element__legacy-checkbox .form-element__checkbox-label--read-only{
    opacity: 1;
    &:before {
        opacity: @opacity-disabled;
    }
}