.checkbox-indeterminate {
    .padding-left-22();
    margin-bottom: 0;
    .font-size-normal();
    font-weight: normal;
    position: relative;
    min-height: 1em;

    input[type=checkbox] {
        display: none;

        + label {
            width: @chb-size-ie;
            width: @chb-size;
            height: @chb-size-ie;
            height: @chb-size;
            position: absolute;
            left: 0;
            margin-top: @chb-v-margin-ie;
            margin-top: @chb-v-margin;

            .rtl & {
                left: auto;
                right: 0;
            }

            &::before {
                content: '';
                position: absolute;
                top: 0px;
                right: 0px;
                bottom: 0px;
                left: 0px;
                border-radius: @chb-border-radius-ie;
                border-radius: @chb-border-radius;
                box-shadow: inset 0 0 0 @scaled-one-px-value-ie @chb-border-normal-ie;
                box-shadow: inset 0 0 0 @scaled-one-px-value @chb-border-normal;
                pointer-events: none;
                z-index: 1;
            }

            svg {
                border-radius: @chb-border-radius-ie;
                border-radius: @chb-border-radius;
                background-color: @chb-background-normal-ie;
                background-color: @chb-background-normal;
                pointer-events: none;
            }

            + span {
                outline: @scaled-one-px-value-ie dotted transparent;
                outline: @scaled-one-px-value dotted transparent;
                display: inline-block;
            }

            .chb-check-mark, .chb-indeterminate {
                display: none;
                fill: @chb-check-mark-background-ie;
                fill: @chb-check-mark-background;
            }
        }

        &:checked, &:indeterminate {
            + label {
                &:before {
                    box-shadow: inset 0 0 0 @scaled-one-px-value-ie @chb-border-checked-ie;
                    box-shadow: inset 0 0 0 @scaled-one-px-value @chb-border-checked;
                }

                svg {
                    background-color: @chb-background-checked-ie;
                    background-color: @chb-background-checked;
                }
            }
        }

        &:checked + label .chb-check-mark {
            display: block;
        }

        &:indeterminate + label .chb-indeterminate {
            display: block;
        }
    }

    &:hover:not(.disabled) {
        + label:before {
            box-shadow: inset 0 0 0 @scaled-one-px-value-ie @chb-border-normal-hover-ie;
            box-shadow: inset 0 0 0 @scaled-one-px-value @chb-border-normal-hover;
        }

        svg {
            background-color: @chb-background-normal-hover-ie;
            background-color: @chb-background-normal-hover;
        }

        input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
            + label {
                &:before {
                    box-shadow: inset 0 0 0 @scaled-one-px-value-ie @chb-border-checked-hover-ie;
                    box-shadow: inset 0 0 0 @scaled-one-px-value @chb-border-checked-hover;
                }

                svg {
                    background-color: @chb-background-checked-hover-ie;
                    background-color: @chb-background-checked-hover;
                }
            }
        }
    }

    &:focus:not(.disabled) {
        + label:before {
            box-shadow: inset 0 0 0 @scaled-one-px-value-ie @chb-border-normal-focus-ie;
            box-shadow: inset 0 0 0 @scaled-one-px-value @chb-border-normal-focus;
        }

        input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
            + label:before {
                box-shadow: inset 0 0 0 @scaled-one-px-value-ie @chb-border-checked-focus-ie;
                box-shadow: inset 0 0 0 @scaled-one-px-value @chb-border-checked-focus;
            }
        }

        span {
            outline-color: @border-control-focus-ie;
            outline-color: @border-control-focus;
        }
    }

    .has-checkbox & {
        position:absolute;
    }

    .listview &, .has-checkbox & {
        input[type=checkbox] + label {
            margin-top: 0;
        }
    }
}