    /**
     * 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;
        }

    }