/**
 * Creates the base structure of checkbox field.
 * @member Ext.form.field.Checkbox
 */
@mixin extjs-form-checkboxfield {
    .#{$prefix}form-cb-wrap {
        padding-top: 3px;
    }

    .#{$prefix}form-checkbox,
    .#{$prefix}form-radio {
        vertical-align: -1px;

        width: $form-checkbox-size;
        height: $form-checkbox-size;
        background: no-repeat;
        background-image: theme-background-image($theme-name, $form-checkbox-image);

        overflow: hidden;
        padding: 0;
        border: 0;
        &::-moz-focus-inner {
            padding: 0;
            border: 0;
        }
    }
    @if $include-ie {
        /* Hack for IE; causes alignment problem in IE9 standards mode so exclude that */
        .#{$prefix}nbr.#{$prefix}ie {
            .#{$prefix}form-checkbox,
            .#{$prefix}form-radio {
                font-size: 0;
            }
        }
    }
    .#{$prefix}form-cb-checked {
        .#{$prefix}form-checkbox,
        .#{$prefix}form-radio {
            background-position: 0 (0 - $form-checkbox-size);
        }
    }

    /* Focused */
    .#{$prefix}form-cb-focus {
        background-position: (0 - $form-checkbox-size) 0;
    }
    .#{$prefix}form-cb-checked {
        .#{$prefix}form-cb-focus {
            background-position: (0 - $form-checkbox-size) (0 - $form-checkbox-size);
        }
    }

    /* Radios */
    .#{$prefix}form-radio {
        background-image: theme-background-image($theme-name, $form-radio-image);
    }

    /* boxLabel */
    .#{$prefix}form-cb-label-before {
        margin-right: 4px;
    }
    .#{$prefix}form-cb-label-after {
        margin-left: 4px;
    }



}